Knockout.js 淘汰：如何通过绑定将数据传递给？

我想将数据传递给下面的模型，但由于该模型是使用“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());

var viewModel=函数（）{
var self=这个；
变量数据={Name:“Mark”}；
self.affunction=函数（数据）{
var self=这个；
self.test=ko.observable（data.Name）；
回归自我；
}
自身功能（数据）；
};
应用绑定（新的viewModel（））；

两件事：

因为您绑定到

a函数（）

，所以您实际上是在执行该函数（当绑定应用于页面加载时），并尝试使用：[function result]绑定

我不确定是否可以将

与

绑定到函数结果。通常这是通过当前绑定上下文的属性完成的（如@lazyberezovsky在回答中用“name”属性所示）

---

将

与

绑定一起使用时，您必须记住，会更改当前所处的绑定上下文

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

如果我们将您的模型更改为更传统的方法，如：（此示例很容易说明您走错了方向）

型号：

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));

<!-- 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>

Html:

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));

<!-- 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:

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));

<!-- 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>

下面是一个示例来演示此示例

说明：

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));

<!-- 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>

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

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

。。。 with绑定将根据关联值是否为null/未定义动态添加或删除子元素

这个斜体部分解释了为什么在我的示例中，如果可观察的

Test（）

为null或未定义，那么使用With绑定不会导致错误；框架通过动态删除所有子元素来处理这种情况。这在我的JSFIDLE中得到了演示

还要注意，我给属性中的对象指定了一个名为

name

的属性，以便可以显式绑定到它。如果您在属性本身上使用带绑定的，您会因为尝试将其作为属性绑定而陷入一些麻烦，因此最好只使用显式属性

希望这是有帮助的