1

这是我使用 Knockout 绑定的 Gridstack 布局示例。问题是我的视图没有根据模型更新，什么时候应该更新。

按下Delete me控制台输出后显示widgets可观察数组得到正确更新，而视图没有。原因似乎在这条线上（没有被调用）：

ko.utils.domNodeDisposal.addDisposeCallback(item, function () { 
    self.grid.removeWidget(item); 
});

据我所知，foreach绑定应该自动更新，为什么不呢？

var ViewModel = function() {
  var self = this;
  self.grid = null;
  self.widgets = ko.observableArray([{
    x: 0,
    y: 0,
    width: 1,
    height: 1
  }, {
    x: 0,
    y: 1,
    width: 1,
    height: 1
  }]);
  self.deleteWidget = function(item) {
    console.log("widgets before", self.widgets());
    self.widgets.remove(item);
    console.log("widgets after", self.widgets());
    return false;
  };
  self.afterAddWidget = function(items) {
    if (self.grid == null) {
      self.grid = $('.grid-stack').gridstack({
        auto: false
      }).data('gridstack');
    }
    var item = _.find(items, function(i) {
      return i.nodeType == 1
    });
    self.grid.addWidget(item);
    ko.utils.domNodeDisposal.addDisposeCallback(item, function() {
      self.grid.removeWidget(item);
    });
  };
};
ko.applyBindings(new ViewModel());
.grid-stack {
  background: lightgoldenrodyellow;
}
.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
<link rel="stylesheet" href="https://raw.githubusercontent.com/troolee/gridstack.js/master/dist/gridstack.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://rawgit.com/troolee/gridstack.js/master/dist/gridstack.js"></script>

<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
  <div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
    <div class="grid-stack-item-content">
      <button data-bind="click: $root.deleteWidget">Delete me</button>
    </div>
  </div>
</div>

4

2 回答 2

2

</div>该问题实际上是由结束标签之间的额外空格字符引起的。该示例对此提出了警告。在我的情况下，它是由代码格式化程序自动插入的，所以它没有被注意到。HTML 模板中的行之间应该</div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->没有空格</div></div>

var ViewModel = function() {
  var self = this;
  self.grid = null;
  self.widgets = ko.observableArray([{
    x: 0,
    y: 0,
    width: 1,
    height: 1
  }, {
    x: 0,
    y: 1,
    width: 1,
    height: 1
  }]);
  self.deleteWidget = function(item) {
    console.log("widgets before", self.widgets());
    self.widgets.remove(item);
    console.log("widgets after", self.widgets());
    return false;
  };
  self.afterAddWidget = function(items) {
    if (self.grid == null) {
      self.grid = $('.grid-stack').gridstack({
        auto: false
      }).data('gridstack');
    }
    var item = _.find(items, function(i) {
      return i.nodeType == 1
    });
    self.grid.addWidget(item);
    ko.utils.domNodeDisposal.addDisposeCallback(item, function() {
      self.grid.removeWidget(item);
    });
  };
};
ko.applyBindings(new ViewModel());
.grid-stack {
  background: lightgoldenrodyellow;
}
.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
<link rel="stylesheet" href="https://raw.githubusercontent.com/troolee/gridstack.js/master/dist/gridstack.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://rawgit.com/troolee/gridstack.js/master/dist/gridstack.js"></script>

<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
  <div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
    <div class="grid-stack-item-content">
      <button data-bind="click: $root.deleteWidget">Delete me</button>
    </div>
  </div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->

于 2016-02-25T10:34:48.980 回答
1

Gridstack 是一个 DOM 控制小部件。您需要某种绑定处理程序来使 Knockout 与 DOM 控制小部件很好地配合使用。

看起来您可能正在使用此示例。它以某种内置绑定处理程序的方式使用组件。它似乎有效，但我建议将 DOM 操作放在它所在的位置：在绑定处理程序中。

更新：这是您将 gridstack 代码放入绑定处理程序的示例。它只是包装了一个foreach绑定处理程序并afterRender在更新中向它添加选项。现在视图模型看起来像一个视图模型，您将能够在一个页面上处理多个网格堆栈而不会$(.grid-stack)选择错误的一个。

ko.bindingHandlers.gridstack = {
  init: function(element, valueAccessor, allBindingsAccessor, data, context) {
    ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, data, context);

    return {
      controlsDescendantBindings: true
    };
  },
  update: function(element, valueAccessor, allBindingsAccessor, data, context) {
    var widgets = valueAccessor(),
      grid = $(element).gridstack().data('gridstack'),
      afterAddWidget = function(items) {
        var item = _.find(items, function(i) {
          return i.nodeType === 1;
        });
        grid.addWidget(item);
        ko.utils.domNodeDisposal.addDisposeCallback(item, function() {
          grid.removeWidget(item);
        });
      },
      newVA = function() {
        return {
          data: widgets,
          afterRender: afterAddWidget
        };
      };
    ko.bindingHandlers.foreach.update(element, newVA, allBindingsAccessor, data, context);
  }
};

var ViewModel = function() {
  var self = this;
  self.grid = null;
  self.widgets = ko.observableArray([{
    x: 0,
    y: 0,
    width: 1,
    height: 1
  }, {
    x: 0,
    y: 1,
    width: 1,
    height: 1
  }]);
  self.deleteWidget = function(item) {
    self.widgets.remove(item);
  };
};
ko.applyBindings(new ViewModel());
.grid-stack {
  background: lightgoldenrodyellow;
}
.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
<link rel="stylesheet" href="https://raw.githubusercontent.com/troolee/gridstack.js/master/dist/gridstack.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js" type="text/javascript"></script>
<script type="text/javascript" src="https://rawgit.com/troolee/gridstack.js/master/dist/gridstack.js"></script>

<div class="grid-stack" data-bind="gridstack: widgets">
  <div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
    <div class="grid-stack-item-content">
      <button data-bind="click: $parent.deleteWidget">Delete me</button>
    </div>
  </div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->

于 2016-02-24T18:21:26.627 回答