backbone.js 数据链接

发布于 2024-10-16 02:40:28 字数 407 浏览 2 评论 0原文

我正在尝试链接输入、模型和 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 做到这一点？

谢谢。

原文

I'm trying to link an input, a model, and a dom element.

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

var Isetta = {
  speed:speedval
}

What do I do if I want whenever the card speed input is changed, for the speed dom element to change with it, and the javascript object/model to change as well?

I can do this easily with jQuery data-linking. How do I do it with backbone.js?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫罗兰の梦幻 2024-10-23 02:40:28

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

如果您添加 id=name< /code> 到该字段，然后在您的视图中，您可以添加类似以下内容：

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/throtdling-function-来电/

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

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

You may also want to consider binding keystroke events and timers to the input field so that when a user has finished typing in their input, you trigger an event on the model that then updates the view:

If you add id=name to that field, then in your view you can add something like:

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

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

Check out this throttle function from Remy Sharp if you want to throttle function calls as a user is still typing in that input field:
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));
},

回复收藏 0 原文

时光病人 2024-10-23 02:40:28

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 库旨在解决的问题不同的问题。

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

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

The Car model will generate events, and CarView responds to them. The list of events is far broader-- and you can add your own, if you like-- than those of data-link. jQuery Data-Link appears to be concerned entirely with forms, and has a limited filtering mechanism. It's interesting, but it's clearly tackling a different problem from the one Backbone and other MVC libraries are intended to cover.

回复收藏 0 原文