Ember.js用於更新視圖的選項

我一直在玩Ember.js，想知道在數據更改時更新DOM的最佳做法是什麼。Ember.js用於更新視圖的選項

具體而言，我爲每個模型的實例分配了開啓和關閉按鈕。如果模型對象的狀態爲「打開」，我希望打開按鈕消失，如果模型狀態爲「關閉」，關閉按鈕將消失。

據我所知，有幾個選項。

A）直接在視圖更改DOM元素與jQuery由控制器

B）設置一個觀察者，將自動重新加載模板調用，並在模板if/else報表裏的東西應該改變基礎在更新的模型參數上。

是那些首選的（或不是）？你們會怎麼做？

來源

2012-11-12 reptilicus

我不認爲你必須這樣做，如果你使用Ember.js與車把模板，因爲你的模型中綁定到你的模板的值將被自動更新。也許你想重新說出你的問題？ – MilkyWayJoe

只是更新了一些帖子，以更好地解釋我要去的。 – reptilicus

爲你寫了一個小提琴，檢查我的答案 – MilkyWayJoe

看看到this fiddle這表明在其他視圖/標籤此實現。本示例使用簡單的Em.Controller而不是Em.CollectionController，但它可以滿足您的需求。

我有2個CSS類：

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

以下觀點是處子視圖中使用它們classNameBinding。並且我將模型綁定到父視圖，其中contentBinding指向控制器上的模型，然後子視圖具有一個屬性，該屬性觀察父級的currentState屬性。當您單擊此子視圖時，它會將currentState設置爲「關閉」，它將再次評估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>

另外，我有這個this sample（這裏的source）這是在如何使用.property來實現這一概念非常相似這個相同的功能，但這是一個更復雜一點，這是一個導航欄菜單。檢查我在做什麼App.NavigationView，你會發現一個名爲NavigationItemView的子視圖，我有一個classNameBinding。它所做的是檢查我的控制器中的屬性值，然後檢查視圖。該比較返回true或false，並且它將根據調用isActive函數屬性的表達式填充類名，這與我根據您的問題編寫的第一個提琴幾乎相同。

希望這會有所幫助。

來源

2012-11-12 22:06:40 MilkyWayJoe

哇，這是偉人，謝謝你的回答！ Ember非常棒，從一個方塊進入它有點困難！儘管如此，真的很欣賞答案。 – reptilicus

很高興幫助:)您應該將此標記爲答案，可以幫助其他具有類似問題的人識別此問題/答案 – MilkyWayJoe

我想你需要詳細說明你的問題。這是基於目前對你的問題的理解的答案：從我的觀點來看，EmberJS並不是一個好的做法。據我瞭解，直到現在，它是EmberJS的強項之一，您不必擔心手動更新DOM。您只需更新模型或控制器對象，所有更改將自動傳播到DOM自動。

最好的問候，

來源

2012-11-12 15:24:55 mavilein

Ember.js用於更新視圖的選項

回答

相關問題