用于更新视图的Ember.js选项

Question

我一直在玩Ember.js，想知道在数据更改时更新DOM的最佳实践是什么。

具体来说，我为模型的每个实例都有带打开和关闭按钮的分隔器。如果模型对象的状态为"打开"，则我希望打开按钮消失，如果模型的状态是"关闭"，则关闭按钮消失。

据我所知，有几个选择。

A) 在控制器调用的视图中使用jQuery直接更改DOM中的元素

B) 设置一个观测器，它将自动重新加载模板，并在模板中包含if/else语句，其中的内容应该根据更新的模型参数进行更改。

是其中之一(还是两者都不喜欢)？你们会怎么做？

Answer 1

看看这个fiddle，它显示了它在其他视图/选项卡中实现的。此示例使用一个简单的Em.Controller而不是Em.CollectionController，但它可以满足您的需要。

我有两个css类：

.visible {visibility: visible}
.invisible {visibility: hidden}

以下视图正在classNameBinding的子视图中使用它们。我将模型绑定到父视图，contentBinding指向控制器处的模型，然后子视图具有一个观察父视图处currentState属性的属性。当您单击此子视图时，它将把currentState设置为"closed"，并将再次评估IsVisible方法，该方法将正确的值提供给classNameBinding。

App.OtherView = Em.View.extend({
templateName: 'other',
contentBinding: 'controller.content',
currentStateBinding: 'controller.content.state',
ButtonView: Ember.View.extend({
tagName: 'a',
click: function(e) {
this.set('parentView.currentState', 'closed');
},
classNameBindings: 'IsVisible:btn visible:invisible',
IsVisible: function() {
return this.get('parentView.currentState') === 'open';
}.property('parentView.currentState')    
})        
});

以下是如何设置模板

<script type="text/x-handlebars" data-template-name="other" >
<h2>Other</h2>
ID: {{content.id}}<br />
Name: {{content.name}}<br />
State: {{content.state}}<br />
{{#view view.ButtonView }}
Close
{{/view}}            
</script>

---

或者，我有这个示例(这是源代码)，它在如何使用.property实现相同功能的概念上非常相似，但这有点复杂，这是用于导航栏菜单的。检查我是如何进行App.NavigationView的，你会发现一个名为NavigationItemView的子视图，我有一个classNameBinding。这样做的目的是在我的控制器中检查一个属性的值，然后在视图中检查。该比较返回true或false，它将根据调用isActive函数属性的表达式填充类名，这与我根据您的问题编写的第一个fiddle几乎相同。

希望这能有所帮助。

Answer 2

我认为您需要详细说明您的问题。这是我根据目前对您问题的理解得出的答案：在我看来，这两个选项都不是EmberJS的好做法。到目前为止，我了解到EmberJS的优势之一是，您不必担心手动更新DOM。您所需要做的就是更新Model或Controller对象，所有更改都将自动传播到DOM。

致问候，