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>

誰かがプロパティ値をクリックしたとき、私はそれを何にでも更新できるようにしたいだけです。たとえば、色をクリックすると、colorプロパティの値が更新されて...紫になります。

4

2 に答える 2

4

非常に近いので、古いドキュメントを参照している必要があります。アクションヘルパーは、オプションの3番目（またはそれ以上）のパラメーターをコンテキストとして受け取るようになりました。

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

http://jsfiddle.net/4EyB8/を参照してください

于 2012-12-23T09:07:21.280 に答える
0

さて、私はこれについて私自身の質問に答えなければなりません。@peter-wagenetと@bradley-priestが示唆したように、アクションヘルパーを使用してコンテキストを送信する機能を利用する必要がありました。

これをIと組み合わせて使用​​すると、表示され{{#each item in list}}ている特定のオブジェクトにコンテキストを設定できます。

また、.setメソッドを使用できるように、オブジェクトのavailableIn配列用にEmber.Objectを作成する必要がありました。

ですから、これ以上苦労することなく、これが私の実用的な解決策です。あなたがより良い解決策を持っているなら、私はそれを見てもっと幸せになるでしょう。

レンプレート

<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 に答える