javascript - knockoutjs 中的嵌套可观察对象

Question

在基于 Knockoutjs 和 Sammy.js 的网络应用程序中，我有三个以父子方式相互依赖的可观察对象(第二个是第一个的子对象，第三个是第二个的子对象)。我的 HTML 包含三个部分，一次只能显示一个部分。每个部分都依赖于使用可见绑定(bind)的上述观察对象之一。

我的 URL 方案的布局类似于/#id-of-parent/id-of-child/id-of-grandchild(在 Sammy.js 中)。

如果我访问一个完整的 URL(一个具有所有三个 ID)，我就会遇到可观察对象的麻烦。在 Sammy 规则函数中，我首先加载并存储父项，然后是子项，最后是孙项(这实际上是用户想要查看的数据)。问题是父项和子项的绑定(bind)也被触发。

有没有办法避免触发绑定(bind)，或者有更好的方法来组织这样的应用程序？

这是我的 Sammy 路线:

Sammy(function() {
  this.get('#study/:id', function() {
    self.studylist(null);
    self.currentStudy(Study.loadById(this.params.id));
  });

  this.get('#study/:id/variableGroups', function() {
    self.variableGroupList(self.currentStudy().variableGroups());
    self.currentVariable(null);
  });

  this.get('#study/:id/variable-group/:variableGroup/variables', function() {
    var groupId = this.params.variableGroup;
    $.ajax(apiUrl + "/variable-group/" + groupId, {
      type: "GET",
      async: false,
      cache: false,
      context: this,
      success: function(data) {
        if (!self.currentStudy()) {
          self.currentStudy(Study.loadById(this.params.id));
        }
        self.currentVariableGroup(new VariableGroup(data.variablegroup));
        self.variableList(self.currentVariableGroup().variables);
      }
    });
  });

  this.get('#study/:id/:variableGroupId/:variableId', function() {
    var variableId = this.params.variableId;
    $.ajax(apiUrl + "/variable/" + variableId, {
      type: "GET",
      async: false,
      cache: false,
      context: this,
      success: function(data) {
        if (!self.currentStudy()) {
          self.currentStudy(Study.loadById(this.params.id));
        }
        if (!self.currentVariableGroup()) {
          self.currentVariableGroup(VariableGroup.loadById(this.params.variableGroupId));
        }
        self.currentVariable(new Variable(data.variable));
      }
    });
  });

  this.get("", function() {
    self.currentStudy(null);
    self.currentVariableGroup(null);
    self.currentVariable(null);
    $.get(apiUrl + "/study/all", function(data) {
      var mappedStudies = $.map(data.studies, function(item, index) {
        return new Study(item);
      });
      self.studylist(mappedStudies);
    });
  });

  this.get('', function() { this.app.runRoute('get', "")});

}).run();

Answer 1

我认为这是不可能的，而且有充分的理由。在不通知订阅者的情况下更新订阅者违反了数据绑定(bind)原则。我强烈建议您重构您的程序，以便更新 currentStudy 和 currentVariableGroup 不会导致不需要的副作用。让一些其他因素决定所需的效果，也许是 activeTemplate observable。

无论如何，这里是the source code对于 可观察。请注意，内部值是私有(private)成员，不能从外部访问。它只能通过调用可观察对象(通知订阅者)来设置。

ko.observable = function (initialValue) {
    var _latestValue = initialValue; //Value is in closure, inaccessible from outside

    function observable() {
        if (arguments.length > 0) {
            // Write

            // Ignore writes if the value hasn't changed
            if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) {
                observable.valueWillMutate();
                _latestValue = arguments[0];
                if (DEBUG) observable._latestValue = _latestValue;
                observable.valueHasMutated();
            }
            return this; // Permits chained assignments
        }
        else {
            // Read
            ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
            return _latestValue;
        }
    }