Question

我有：

userAccess对象：

var userAccess = new (
  function() {
      this.userLogedIn = false;
  }
);

我有模型视图，绑定到UI

var modelview = new (
  function(){             

     this.itemVisible = 
       function(data) {
           if(data.id === "ID2")
             return userAccess.userLogedIn;

            return true;
       };     

    this.items = [{id:"ID1", text:"text1"}, {id:"ID2", text:"text2"}];
  }
);

在UI上，foreach绑定内部：

<span data-bind="text: text, visible:$parent.itemVisible($data)"> </span>

因此span元素的可见性被绑定到modelview的功能。

该函数根据ID和userAccess的值确定当前项的可见性。

问题：

双向绑定在此方案中不起作用。例如，如果我使userAccess.userLogedIn = true元素“ID2”不可见。

这是因为缺乏observable，但在我看来，我不能在这种模式中适应观察。

我也知道我可以手动更新绑定，但如果可能的话，我想避免这种情况。

我觉得我在这里遗漏了一些明显的东西。

Complete source on CodePen

Answer 1

您应该重构整个设置以使用observable。否则，由于缺乏自动视图更新（正如您所注意到的），淘汰赛的使用没有多大意义。

var userAccess = new (
    function() {
        // It is likely that this value will change, so make it an observable!
        this.userLogedIn = ko.observable(false);
    }
);

// Create a "class" for the items in the list be able to encapsulate behavior /
// properties such as "is this item visible"?
var Item = function(id, text) {
    var self = this;

    self.id = id; // <-- will most likely never change (?) => not an observable
    self.text = ko.observable(text);

    // Use a "computed observable" for things that require more sophisticated logic
    self.visible = ko.computed(function() {
        if (self.id === "ID2") {
            return userAccess.userLogedIn(); // <-- observable = () required!
        } else {
            return true;
        }
    });
};

var modelview = new (
    function() {             
        this.items = ko.observableArray([
            new Item("ID1", "text1"), new Item("ID2", "text2")
        ]);
    }
);

并在HTML中

<span data-bind="text: text, visible: visible"> </span>

示例：http://jsfiddle.net/a89VL/

在淘汰赛中将属性绑定到modelview函数

我有：

问题：

1 个答案: