[英]Observing Properties of a User Defined Javascript Object
I kind of know that we cannot observe properties of an object by simply observing an object. 我知道我们不能仅通过观察对象来观察对象的属性。 But I want to know if my understanding is correct. 但是我想知道我的理解是否正确。
Can we do something like this ? 我们可以做这样的事情吗? http://jsfiddle.net/Z3gNC/ http://jsfiddle.net/Z3gNC/
function Person(name, age) {
this.name = name;
this.age = age;
}
$(function () {
var vm = (function () {
var person = ko.observable(new Person("ABC", 23));
return {
person: person
};
})();
ko.applyBindings(vm);
});
It is not working so we can't I guess. 它不起作用,所以我们不能猜测。 I also don't understand where this character 'c' comes from. 我也不知道这个字符“ c”的来源。
I just updated your fiddle to be the more-usual KO pattern: 我刚刚将您的小提琴更新为更常用的KO模式:
http://jsfiddle.net/Z3gNC/1/ http://jsfiddle.net/Z3gNC/1/
function Person(name, age) {
this.name = ko.observable(name);
this.age = ko.observable(age);
}
$(function () {
var vm = (function () {
var person = new Person("ABC", 23);
return {
person: person
};
})();
ko.applyBindings(vm);
});
The reason you see 'c' in your original fiddle is because vm.person is a ko.observable function, which when minimised looks like: 之所以在原始小提琴中看到“ c”,是因为vm.person是ko.observable函数,当最小化时,它看起来像:
function c(){if(0<arguments.length)return c.Ka(d,arguments[0])&&(c.P(),d=arguments[0],c.O()),this;a.k.zb(c);return d}
Every function has a name property: 每个函数都有一个name属性:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
so in this case vm.person.name is the name of the function vm.person which when minified is 'c' ! 因此,在这种情况下,vm.person.name是函数vm.person的名称,在最小化时为'c'!
Edit: if you use a single observable Person, KO won't know that the inner property changes, unless you tell it with a valueHasMutated call. 编辑:如果您使用单个可观察的Person,则KO将不会知道内部属性会发生变化,除非您通过valueHasMutated调用来告诉它。 This next demo uses your VM structure and binds the changes in the textbox to the span, via a change event and a valueHasMutated call. 下一个演示使用您的VM结构,并通过change事件和valueHasMutated调用将文本框中的更改绑定到跨度。 So it works, but the 'pure' KO approach above is perhaps preferable for simplicity. 这样就可以了,但是为了简单起见,上面的“纯” KO方法也许是可取的。
http://jsfiddle.net/Z3gNC/6/ http://jsfiddle.net/Z3gNC/6/
function Person(name, age) {
this.name = name;
this.age = age;
}
$(function () {
var vm = (function () {
var person = ko.observable(new Person("ABC", 23));
var mutate = function(data, event) {
data.person.valueHasMutated();
}
return {
person: person,
mutate: mutate
};
})();
ko.applyBindings(vm);
});
... which needs this HTML: ...需要以下HTML:
<input data-bind="value:person().name, event: {change: mutate}" />
You're not far off, you just need to unwrap your person
observable when referencing it in your markup: 你并不遥远,你只需要解开你的person
在你的标记引用时,可观察到:
<input data-bind="value:person().name" />
<input data-bind="value:person().age" />
Edit from comment 从评论编辑
You can make the properties of Person
observable so that they track changes like so: 您可以使Person
的属性可观察,以便它们跟踪更改,如下所示:
function Person(name, age) {
this.name = ko.observable(name);
this.age = ko.observable(age);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.