铆钉和脊柱js示例

Question

我正在研究Spine应用程序，用户铆接js代替模板引擎，到目前为止，我对铆钉绑定感到满意，我的视图更加简洁和可读，并且我有一个清晰的分隔担心：我的控制器只负责管理应用程序的状态，我的模型会执行持久性任务，我的自定义铆钉绑定和格式化程序负责格式化值和按摩用户输入。到现在为止还挺好。

我唯一担心的是我使用watch.js，我怀疑手表是iphone的性能问题的责任，我不太习惯使用它。

在铆钉js网站上，它声明它支持Spine，虽然我一直无法找到一个单独的例子，更不用说一个片段。

两个用于控制器和模型作品的唯一适配器我能想出是这样的：

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