Question

给出以下jsfiddle： 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

如此接近，你必须提到过时的文件。动作助手现在将可选的第三个（或更多个）参数作为上下文。

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

请参阅http://jsfiddle.net/4EyB8/

Answer 2

好吧，我将不得不回答这个问题。正如@ peter-wagenet和@ bradley-priest建议的那样，我确实需要使用动作帮助器发送上下文的能力。

这与{{#each item in list}}结合使用我可以将上下文设置为正在查看的特定对象。

我还必须为availableIn对象数组创建Ember.Object，以便我可以使用.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/

EmberJS Action目标是数组中的对象

2 个答案: