2

鉴于以下 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>

当有人单击属性值时，我只想能够将其更新为任何值。例如，当他们单击颜色时，我希望颜色属性值更新为...紫色。

4

2 回答 2

4

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

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

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

于 2012-12-23T09:07:21.280 回答
0

好吧，我将不得不在这个问题上回答我自己的问题。正如@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/

于 2012-12-23T22:49:59.887 回答