铆钉和脊柱 js 示例

Question

我正在开发一个 Spine 应用程序，用户用铆钉 js 代替模板引擎，到目前为止，我对铆钉绑定很满意，我的视图更加简洁易读，并且我有一个清晰的关注点分离：仅我的控制器负责管理应用程序的状态，我的模型负责持久性工作，我的自定义铆钉绑定和格式化程序负责格式化值和按摩用户输入。到目前为止，一切都很好。

我唯一担心的是我正在使用 watch.js，我怀疑 watch 是负责解决 iphone 性能问题的，我不太习惯使用它。

在 rivets js 站点中，它声明它支持 Spine，尽管我无法找到单个示例，更不用说 sn-p。

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

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

有没有更好的方法将铆钉绑定到脊椎模型和控制器？

我一直在努力使用 Object.defineProperty 无济于事。

Answer 1

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

这是一个标准适配器，用于将 Spine.js 模型与 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 事件工作方式的一部分。

不幸的是，上面的适配器将更新该模型的每个绑定，包括未更改的属性的绑定。或者，您可以使用 Spine-Attribute-Events 之类的东西，它执行基本的脏跟踪并为更改的属性触发额外的 update:keypath 样式事件。这在 DOM 操作方面会更加高效，因为我们只更新需要更新的内容。

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 中已更改属性的部分。

同样，所有这些都只有在您调用 save() 时才会发生，这实际上是一个不错的功能，因为您可以根据需要对模型进行尽可能多的中间更改，然后在最后调用 save() 进行更改变化反映在 UI 中。

Answer 2

我不是专家，但这似乎是 Watch.js 的正确适配器配置文件。

但这可能不是您的性能问题。试试这个链接以获得更多性能提示： How to bind deeper than one level with rivets.js