Question

我遇到了Knockout.js的问题。我尝试做的是过滤选择字段。我有以下html：

    <select data-bind="options: GenreModel, optionsText: 'name', value: $root.selectedGenre"></select>
    <ul data-bind="foreach: Model">
        <span data-bind="text: $root.selectedGenre.id"></span>
        <li data-bind="text: name, visible: genre == $root.selectedGenre.id"></li>
    </ul>

和js：

var ViewModel = function (){
    self.selectedGenre = ko.observable();
    self.Model = ko.observableArray([{
        name: "Test",
        genre: "Pop"
    }
    ]);
    self.GenreModel = ko.observableArray([
        {
        name: "Pop",
        id: "Pop"
    },

    {
        name: "Alle",
        id: "All"
    }
    ]);
};

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

JSFiddle：http://jsfiddle.net/CeJA7/1/

所以我的问题是，现在选择列表不会更新ul内的span的绑定，我不知道为什么......

值绑定应该在选择值更改时更新属性selectedGenre，不应该吗？

欢迎任何想法。

Answer 1

您的代码中存在很多问题：

1）self不是像this这样神奇的变量。这是人们用来cope with variable scoping的东西。每当你在JavaScript函数的某个地方看到self时，请确保之前某处有var self = this;。

2）KnockoutJS可观察量不是普通变量。它们是函数（selectedGenre = ko.observable()）。 ko.observable()返回一个函数。如果您read the very first lines of documentation关于可观察对象，您应该了解对此实际值的访问被封装在此可恢复函数中。这是设计上的，并且由于JavaScript作为一种语言可以做什么和不能做什么的限制。

3）根据定义，在HTML中，<ul>元素只能包含<li>元素，而不能包含<span>或其他任何元素。

应用上述修补程序会导致working updated sample：

HTML：

<select data-bind="options: GenreModel, optionsText: 'name', value: selectedGenre"></select>

<span data-bind="text: $root.selectedGenre().id"></span>

<ul data-bind="foreach: Model">      
    <li data-bind="text: name, visible: genre == $root.selectedGenre().name"></li>
</ul>

JavaScript：

var ViewModel = function (){
    var self = this;

    self.selectedGenre = ko.observable();

    self.Model = ko.observableArray([
        {
            name: "Test",
            genre: "Pop"
        }
    ]);

    self.GenreModel = ko.observableArray([
        {
        name: "Pop",
        id: "Pop"
    },

    {
        name: "Alle",
        id: "All"
    }
    ]);
};

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

Knockout.js不更新选择字段中的绑定

1 个答案: