Question

我想将数据传递给下面的模型，但由于模型是使用'with'语句绑定的，所以它似乎在页面加载时触发，并且错误表示'Name'未定义。

<div data-bind="with: aFunction()">
    <div data-bind="text: test"></div>
    <input data-bind="value: test, valueUpdate: 'afterkeydown'"></input>
</div>


var viewModel = function(){
    var self = this;
    var data = {Name : "Mark"};

    self.aFunction = function (data){
        var self = this;
        self.test = ko.observable(data.Name);  
        return self;
    }

    self.aFunction(data);

};
ko.applyBindings(new viewModel());

Answer 1

两件事：

因为您绑定到aFunction()，所以您实际上正在执行该功能（当在页面加载时应用绑定时）并尝试绑定with: [function result]
我不确定您是否可以将with绑定到函数结果。通常这是通过当前绑定上下文的属性来完成的（正如@lazyberezovsky在他的回答中用“name”属性说明的那样）

Answer 2

使用with绑定时，您必须记住更改当前所在的绑定上下文。

坦率地说，现在你的模型有一个非常奇怪的设置，因为它的行为更像是一个可观察的工厂，产生了可观察的而不是包含一个可观察的。

如果我们将您的模型改为更传统的方法，那么:(这个例子很容易说明你走错路的地方）

<强>型号：

var viewModel = function(data){
    var self = this;
    self.Test = ko.observable();

    self.load = function(data) {
        if (data) {
            self.Test({ name: ko.observable(data.name) });
        }   
    };
    self.load(data);
};

var data = { name: 'Matt' };
ko.applyBindings(new viewModel(data));

<强> HTML

<!-- Once inside this markup, the scope changes to the things contained 
inside of Test(). Therefore your aliasing needs to look like the following -->
<div data-bind="with: Test">
    <div data-bind="text: name"></div>
    <input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
</div>

<强>的jsfiddle：

这是展示此示例的jsfiddle

<强>解释

重要的是要注意有关绑定的文档：

with绑定创建一个新的绑定上下文，以便后代   元素绑定在指定对象的上下文中。

...    with binding将动态添加或删除后代元素，具体取决于相关值是否为null / undefined

这个斜体部分解释了为什么在我的例子中使用With绑定如果observable Test()为null或未定义，则不会出现错误;框架通过动态删除所有后代元素来处理这种情况。这在我的jsfiddle中得到了证明。

另请注意，我在属性中为对象提供了一个名为name的属性，以便我可以显式绑定到它。如果你在一个属性本身上使用with绑定，那么你会尝试将它作为一个属性绑定到一些hack，所以你最好只有IMO的显式属性。

希望这很有帮助

淘汰赛：如何将数据传递给绑定？

2 个答案: