铆钉和脊柱js示例 [英] Rivets and Spine js example

问题描述

我正在开发一个Spine应用程序，该用户使用铆钉js代替模板引擎，到目前为止，我对铆钉绑定感到满意，我的观点更加简洁和可读，并且我有一个明确的关注点:仅我的控制器负责管理应用程序的状态，我的模型负责执行持久性工作，而我的自定义铆钉绑定和格式化程序负责格式化值和按摩用户输入.到目前为止，一切都很好.

I am working on a Spine App that users rivets js in lieu of a templating engine and so far I am delighted with the rivets bindings, my views are more concise and readable and I have a clean separation of concerns: my controllers only take care of managing the state of the app, my models do the persistence stuff and my custom rivet bindings and formatters take care of formatting values and massaging user input. So far so good.

我唯一担心的是我正在使用watch.js，我怀疑watch对iPhone性能问题负责，并且我不太习惯使用它.

My only concern is that I am using watch.js and I suspect watch is responsable for iphone performance issues, and I not too comfortable using it.

在铆钉js站点中，它声明它支持Spine，尽管我找不到单个示例，更不用说摘要了.

In rivets js site it states that it has support for Spine although I haven't been able to find a single example let alone a snippet.

我能想到的唯一适用于控制器和模型的适配器是这样的:

The only adapter that works both for controllers and models I could come up with is this:

rivets.configure adapter:
  subscribe: (obj, keypath, callback) ->
    watch obj, keypath, callback

  unsubscribe: (obj, keypath, callback) ->
    unwatch obj, keypath, callback

  read: (obj, keypath) ->
    obj[keypath]

  publish: (obj, keypath, value) ->
    obj[keypath] = value

是否有更好的方法将铆钉与书脊模型和控制器绑定?

Is there a better way to binding rivets to spine models and controllers?

我一直在努力使用Object.defineProperty.

I've been struggling with Object.defineProperty to no avail.

推荐答案

当您更改模型上的属性时，Spine.js不会发出事件，仅当您在模型上调用save()时才会触发事件.它也不会执行任何脏跟踪，因此您不会立即获得update:keypath样式的事件，它只会触发一个update事件.

Spine.js doesn't emit events when you change attributes on the model, it only fires an event when you call save() on the model. It also doesn't perform any sort of dirty tracking, so you don't get update:keypath style events out-of-the-box, it just fires a single update event.

这是将Spine.js模型与Rivets.js一起使用的标准适配器.

Here's a standard adapter for using Spine.js models with Rivets.js.

rivets.configure
  adapter:
    subscribe: (obj, keypath, callback) ->
      obj.bind "update", callback

    unsubscribe: (obj, keypath, callback) ->
      obj.unbind "update", callback

    read: (obj, keypath) ->
      obj[keypath]

    publish: (obj, keypath, value) ->
      obj[keypath] = value

使用上述适配器，Rivets.js将在从视图到模型时(使用双向绑定器，例如value或checked)更新模型上的内存中属性，并将更新仅当在模型上调用save()时(从模型到视图).这只是Spine.js事件工作方式的一部分.

Using the above adapter, Rivets.js will update the in-memory attributes on your models when going from view-to-model (using a two-way binder such as value or checked) and will update the view (going from model-to-view) only when you call save() on the model. This is just part of how Spine.js events work.

不幸的是，上述适配器将更新该模型的每个绑定，包括未更改的属性的绑定.另外，您可以使用 Spine-Attribute-Events 之类的东西，它会进行基本的脏跟踪并触发更改属性的附加update:keypath样式事件.就DOM操作而言，这将表现得更好，因为我们只更新需要更新的内容.

Unfortunately the above adapter will update every binding for that model, including bindings for properties that did not change. Alternatively, you can use something like Spine-Attribute-Events which does basic dirty tracking and fires an additional update:keypath style event for the attributes that changed. This will be far more performant in terms of DOM operations as we're only updating what needs to be updated.

rivets.configure
  adapter:
    subscribe: (obj, keypath, callback) ->
      obj.bind "update:" + keypath, callback

    unsubscribe: (obj, keypath, callback) ->
      obj.unbind "update:" + keypath, callback

    read: (obj, keypath) ->
      obj[keypath]

    publish: (obj, keypath, value) ->
      obj[keypath] = value

如您所见，这为Rivets.js提供了更细化的方式来订阅各个属性更改.这里的基本思想是Rivets.js现在将仅更新DOM中已更改属性的部分.

As you can see, this gives Rivets.js a more granular way to subscribe to individual attribute changes. The basic idea here is that Rivets.js will now update only the parts of the DOM for attributes that have changed.

同样，只有当您调用save()时，所有这些情况才会发生，这实际上是一个不错的功能，因为您可以根据需要对模型进行任意多次中间更改，然后在最后调用save()进行更改更改反映在用户界面中.

Again all of this happens only when you call save(), which is actually a nice feature because you can make as many intermediate changes to the model as you want, and then call save() at the very end to have those changes reflected in the UI.

这篇关于铆钉和脊柱js示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！