如何使用嵌套模板从$data上下文对象中获得Knockback CollectionObservable中的底层主干集合

以下面的代码片段为例:

var Animal = Backbone.Model.extend();
var Zoo = Backbone.Collection.extend({ model: Animal });
var tiger = new Animal({ name: "tiger" });
var zoo = new Zoo(tiger);
var viewModel = {
    tiger: kb.viewModel(tiger);
    zoo: kb.collectionObservable(zoo);
}
ko.applyBindings(viewModel);

可以从$data上下文中获得对tiger模型的引用:

tiger === $data.tiger().__kb.object;

或

tiger === $data.zoo()[0].__kb.object;

，我假设它存在于这个dependantObservable函数的某个地方，但我似乎找不到对原始Backbone Collection

的引用。

$data.zoo

有谁知道如何获得原始的主干集合吗?

此外，如果视图模型是这样的，如果你能告诉我任何获得骨干集合的方法，那么奖励点是:

viewModel = kb.collectionObservable(zoo)

这里的挑战是$data包含了求值的dependantObservable函数的结果。

EDIT 在收到上述问题的完全有效的答案后，我意识到我的问题只发生在与嵌套模板的更复杂的绑定中:

模板如下:

    <!-- outer template -->
    <script type="text/html" id="tmpl-outer">
        <button data-bind="click: $root.outerContext">Outer Context</button>
        <div data-bind="template: { name: 'tmpl-inner', data: collection }"></div>
    </script>
    <!-- inner template -->
    <script type="text/html" id="tmpl-inner">
        <button data-bind="click: $root.innerContext">Inner Context</button>
        <div data-bind="foreach: $data">
            <button data-bind="click: $root.modelContext">Model Context</button>
        </div>
    </script>

模型和视图模型:

var model = new Backbone.Model();
var collection = new Backbone.Collection(model);
var viewModel = {
    collection: kb.collectionObservable(collection),
    outerContext: function (data) {
        console.log(data.collection.collection() === collection);
    },
    innerContext: function (data) {
        console.log("??????? === collection");
    },
    modelContext: function (data) {
        console.log(data.model() === model);
    }
};
ko.applyBindings(viewModel);

最后，在某个地方渲染一切:

<body>
    <div data-bind="template: { name: 'tmpl-outer' }"></div>
</body>

所以，我最初的问题，我过度简化了我的例子应该是:我如何获得底层集合的行:

console.log("??????? === collection");

这个上下文中的集合似乎已经转换为一个简单的KnockOut可观察数组——似乎没有任何重要的KnockBack属性。

您可以通过在kb.CollectionObservable和kb.ViewModel的实例上使用getter来获取底层集合/模型。

var collection = new Backbone.Collection(),
    view_models = kb.collectionObservable(collection),
    reference = view_models.collection();
console.log(collection === reference);

您可以对kb.viewModel

的实例执行相同的操作。

var model = new Backbone.Model({ id : 1 }),
    view_model = kb.viewModel(model),
    reference = view_model.model();
console.log(model === reference);

你可以通过调用数据绑定中的getter来访问$data中的集合/模型，尽管我真的看不到任何需要这样做，如果你使用工厂view_models来允许你为每个vm定义任何数量的特定计算/可观察对象。

var model = new Backbone.Model({ id : 1 });
var collection = new Backbone.Collection(model);
var AnimalViewModel = kb.ViewModel.extend({
    constructor: function(model) {
        kb.ViewModel.prototype.constructor.call(this, model, {});
        return this;
        // Custom code per vm created
    }
});
var view_model = {
    zoo : kb.collectionObservable(collection, {
        view_model : AnimalViewModel
    });
}

最后我发现我必须通过父类来获取集合。我不喜欢这种间接的方式，但是我也找不到其他的方法。

视图模型现在有了这个函数:

doSomethingWithUnderlyingCollection: function(collectionName, parentContext) {
    var underlyingCollection = parentContext.model().get(collectionName);
    // do something with the underlying collection here, e.g. add a model.
}

然后从模板中调用方法:

<button data-bind="click: function() { $root.doSomethingWithUnderlyingCollection('MyCollection', $parent); }">Add</button>

相关内容

最新更新

热门标签：