從視圖參數傳遞給使用SproutCore的2

控制器如果我有一個控制器：從視圖參數傳遞給使用SproutCore的2

HTH.todosController = SC.ArrayProxy.create({ 
    content: HTH.store.find(HTH.Todo) 
});

我可以顯示所有待辦事項這樣做：

... 
<script type="text/x-handlebars"> 
    {{#collection contentBinding="HTH.todosController"}} 
    {{content}} 
    {{/collection}} 
</script> 
...

但我怎麼會顯示一個待辦事項與特定的來自視圖的ID？

... 
<script type="text/x-handlebars"> 
    {{#view contentBinding="HTH.todosController.specific" specificId="1"}} 
    {{content}} 
    {{/view}} 
</script> 
...

來源

2011-11-06 Theozaurus

這裏的in jsfiddle允許你定義待辦事項的特定ID在視圖的車把定義你在你的例子有一個解決辦法。這有點粗糙，但它工作。

把手：

<script type="text/x-handlebars"> 
{{view App.SpecificIdWrapper}} 
<hr /> 
{{#collection App.TodosView contentBinding="App.todosController"}} 
    {{content.name}} 
{{/collection}} 
<hr /> 
{{view App.SelectedToDoView}} 
</script> 

<script type="text/x-handlebars" data-template-name="specificId"> 
{{#view App.SpecificIdView dataBinding="App.todosController.content" specificId=3}} 
    Specific Todo Id: {{content.id}} 
    <br /> 
    Specific Todo Name: {{content.name}} 
{{/view}} 
</script> 

<script type="text/x-handlebars" data-template-name="selectedToDo"> 
{{#view contentBinding="App.todosController.selectedToDo.content"}} 
    Selected Todo Id: {{content.id}} 
{{/view}}

的JavaScript：

App = Ember.Application.create(); 

App.SpecificIdWrapper = Ember.View.extend({ 
    templateName: 'specificId' 
}); 

App.SpecificIdView = Ember.View.extend({ 
content: null, 
data: null, 
specificId: null, 

_getTodoById: function() { 
    var data = this.get('data'); 
    if(data) { 
     for(var i=0;i<data.length;i++) { 
      if(data[i].get('id') === this.get('specificId')) { 
       this.set('content', data[i]); 
       break; 
      } 
     } 
    } 
}, 

// This will make sure the content is set when the view is rendered 
didInsertElement: function() { 
    this._getTodoById(); 
}, 
// And this will update the content whenever specificId is changed 
specificIdDidChange: function() { 
    this._getTodoById(); 
}.observes('specificId') 
}); 

App.SelectedToDoView = Ember.View.extend({ 
    templateName: 'selectedToDo' 
}); 

App.TodosView = Ember.CollectionView.extend({ 
itemViewClass: Ember.View.extend({ 
    click: function() { 
     App.todosController.set('selectedToDo', this); 
    } 
}) 
}); 

App.todosController = Ember.ArrayController.create({ 
content: [ 
    Ember.Object.create({id: 1, name: "obj1"}), 
    Ember.Object.create({id: 2, name: "obj2"}), 
    Ember.Object.create({id: 3, name: "obj3"}), 
    Ember.Object.create({id: 4, name: "obj4"}), 
    Ember.Object.create({id: 5, name: "obj5"}), 
    Ember.Object.create({id: 6, name: "obj6"}) 
], 
selectedToDo: null 
});

來源

2011-12-20 08:16:46

您是否在考慮CRUD風格的主/細節工作流程？

如果你是，這裏的一系列tutorials我只是在SC2寫了CRUD操作。

基本上，我附上雙擊處理程序，以觸發狀態圖的行動來顯示一個模式對話框的詳細信息錶行。

CollectionView : SC.CollectionView.extend({ 
contentBinding: 'App.resultsController', 

itemViewClass: SC.View.extend({ 
    tagName: 'tr', 

    // Spit out the content's index in the array proxy as an attribute of the tr element 
    attributeBindings: ['contentIndex'], 

    willInsertElement: function() { 
    this._super(); 

    // Add handler for double clicking 
    var id = this.$().attr('id'); 
    this.$().dblclick(function() { 
     App.statechart.sendAction('showUser', $('#' + this.id).attr('contentIndex')); 
    }); 
    } 
})

Part 4本教程演示了我是如何做到這一點的。

希望這會有所幫助。

來源

2011-11-07 04:34:23 Veebs

從視圖參數傳遞給使用SproutCore的2

回答

相關問題