Question

我正在尝试链接输入，模型和dom元素。

<div data-carName="Isetta">
  <input type="textfield" name="speed"/>
  <br />
  <br />
  Speed: <br />
  <div>{speed}</div>
</div>

var Isetta = {
  speed:speedval
}

如果我想要更改卡片速度输入，速度dom元素随之更改，以及javascript对象/模型也会更改，我该怎么办？

我可以使用jQuery数据链接轻松完成此操作。我如何使用backbone.js做到这一点？

感谢。

Answer 1

var Car = Backbone.Model.extend({ });

var CarView = Backbone.View.extend({
    model: Car,
    initialize: function() {
        this.model.bind('change', _.bind(this.render, this));
    }
    render: function() { ... }
}

Car模型将生成事件，CarView会响应它们。事件列表范围更广 - 如果您愿意，您可以添加自己的事件列表，而不是数据链接。 jQuery Data-Link似乎完全关注表单，并且具有有限的过滤机制。这很有意思，但它显然解决了一个Backbone和其他MVC库要解决的不同问题。

Answer 2

您可能还想考虑将键击事件和计时器绑定到输入字段，以便在用户输入完输入后，触发模型上的事件，然后更新视图：

如果您将id=name添加到该字段，那么您可以在视图中添加以下内容：

events: {
  "keypress #speed"  : "updateViewOnEnter"
},

updateViewOnEnter: function(e) {
  if (e.keyCode != 13) return;
  e.preventDefault();
  this.model.trigger('speed:change');
},

如果您想要在用户仍在输入字段中输入时调节函数调用，请从Remy Sharp查看此节流功能： http://remysharp.com/2010/07/21/throttling-function-calls/

events: {
  "keypress #speed"  : "updateViewOnDelayedKeypress"
},

updateViewOnDelayedKeypress: function(e) {
  throttle(function (e) {
    this.model.trigger('speed:change');
  }, 250));
},

Answer 3

您还可以查看此库：https://github.com/derickbailey/backbone.modelbinding，它会添加一个模块，为您处理基于动态和约定的绑定。

backbone.js数据链接

3 个答案: