EmberJS行動目標的對象考慮下面的jsfiddle數組

Question

內： http://jsfiddle.net/EasyCo/KTmKh/5/

我想這是非常簡單的，但我都有點吃力。

我有一個對象，在該對象我有一個屬性是與屬性的對象的陣列。

// Create an instance 
var drt = window.App.TowelObj.create({ 
    name: "Dry Towel", 
    availableIn: [ 
     { 
     color: "red", 
     size: "small"}, 
    { 
     color: "blue", 
     size: "medium"} 
    ], 
    wetness: 0, 
    isEditing: true 
}); 

我遍歷數組並列出屬性值。

<script type="text/x-handlebars" id="towels"> 

{{#each availableIn}} 
    <div> 
     <a {{action doStuff target="controller" context="color"}}>{{color}}</a> 
    </div> 
{{/each}} 

</script> 

當有人點擊屬性值時，我只是想能夠更新它。例如，當他們點擊顏色時，我希望顏色屬性值更新爲...紫色。

Answer 1

嗯，我得回答我自己在這一個問題。正如@ peter-wagenet和@ bradley-priest建議的那樣，我確實需要利用使用動作助手發送上下文的能力。

此配合使用{{#each item in list}}我可以上下文設定爲特定對象被觀看。

我也不得不爲對象的availableIn陣列創建Ember.Object（S），這樣我可以使用.SET方法。

因此，事不宜遲，這裏是我的工作解決方案。如果你有更好的解決方案，我會更樂意看到它。

模板

<script type="text/x-handlebars" id="application"> 
    <h1>If you're gonna survive out here, you've got to know where your towel is.</h1> 
    {{outlet}} 
</script> 
<script type="text/x-handlebars" id="towel"> 
    <h2>The availableIn:</h2> 
    {{outlet}} 
</script> 
<script type="text/x-handlebars" id="towels"> 

{{#each item in availableIn}} 
    <div> 
     {{! The default click action will find the controller and look for doStuff and send it the event with the context set to item }} 
     <a {{action doStuff item target="controller"}}>{{item.color}}</a> 
    </div> 
{{/each}} 

</script> 

的Javascript

window.App = Ember.Application.create({ 
    ready: function() { 
     this.initialize(); 
    } 
}); 

window.App.Router = Ember.Router.extend({ 
    root: Ember.Route.extend({ 
     index: Ember.Route.extend({ 
      route: '/', 
      connectOutlets: function(router) { 
       var controller = router.get('applicationController'); 
       controller.connectOutlet('towel'); 
       controller = router.get('towelController'); 
       controller.connectOutlet('towels'); 
      } 
     }) 
    }) 
}); 

window.App.ApplicationView = Ember.View.extend({ 
    templateName: 'application' 
}); 

window.App.ApplicationController = Ember.Controller.extend(); 

window.App.TowelController = Ember.ObjectController.extend(); 

window.App.TowelView = Ember.View.extend({ 
    templateName: 'towel' 
}); 

// Towel Object model 
window.App.Towel = Ember.Object.extend({ 
    name: null, 
    availableIn: [], 
    wetness: 0, 
    isEditing: false 
}); 

// Style Object model 
window.App.Style = Ember.Object.extend({ 
    color: null, 
    size: null 
}); 

// Create some style instances 
var style1 = window.App.Style.create({ 
    color: "red", 
    size: "small" 
}); 

var style2 = window.App.Style.create({ 
    color: "blue", 
    size: "medium" 
}); 

// Create a towel instance 
var drt = window.App.Towel.create({ 
    name: "Dry Towel", 
    availableIn: [style1, style2], 
    wetness: 0, 
    isEditing: true 
}); 

// The Towels Controller 
window.App.TowelsController = Ember.ObjectController.extend({ 
    // Set the content to our dummy data 
    content: drt, 

    // Define the action doStuff 
    doStuff: function(event) { 

     // Grab the context which is the object being cliked and change it's color property to 'purple' 
     event.context.set('color', 'purple');   
    } 
}); 

// The Towels View 
window.App.TowelsView = Ember.View.extend({ 
    templateName: 'towels' 
});​ 

工作小提琴：http://jsfiddle.net/EasyCo/cE2xP/

Answer 2

這麼近，你必須指過時的文檔。 動作助手現在將可選的第三個（或更多）參數作爲上下文。

<a {{action doStuff color target="controller"}}>{{color}}</a> 

見http://jsfiddle.net/4EyB8/