Question

我正在使用Ember应用程序并需要帮助加载画布项目

我可以在Ember中绘制一个简单的矩形，并成功加载了一些我想要访问的夹具数据，以便我的矩形可以使用它的属性

这是我的Ember代码：

window.App = Ember.Application.create({

});

App.ApplicationAdapter = DS.FixtureAdapter.extend({

});


//------------------------------
App.Router.map(function() {
    this.resource('index', { path: '/' });
});

// ... additional lines truncated for brevity ...
App.IndexRoute = Ember.Route.extend({
    model: function () {
        return this.store.find('item');
    }
});


//------------------------------
App.IndexController = Ember.ArrayController.extend({

    testWidth: '100',

    actions:  {
        load: function(width)    {
            this.set('testWidth', width);
        }
    }
});


App.CanvasView = Ember.View.extend({
    tagName: "canvas",
    attributeBindings: ['height', 'width'],
    height: 400,
    width: 600,

    didInsertElement: function(){
        this.drawItem();
    },

    drawItem: function(){
        var canvas = Ember.get(this, 'element');
        var ctx = canvas.getContext("2d");

        // -- draw red rectangle --
        ctx.fillStyle='#00FF00';
        ctx.fillRect(200,0,80,100);


        var rwidth = ''; // ?? how to access controller testWidth ??

        // -- draw dynamic green rectangle --
        ctx.fillStyle='#FF0000';
        ctx.fillRect(0,0,rwidth,100);

    }


});


//------------------------------
App.Item = DS.Model.extend({
    width: DS.attr('string'),
    height: DS.attr('string')
});



App.Item.FIXTURES = [
    {
        id: 1,
        width: '220',
        height: '340'
    },
    {
        id: 2,
        width: '100',
        height: '350'
    },
    {
        id: 3,
        width: '400',
        height: '100'
    }
];

和我的HTML：

<body>
  <script type="text/x-handlebars" data-template-name="index">
        <div class="container">

            <div class="row">
                <div class="col-md-3">

                    <div id="newItem">

                        <div id="items">
                            <h4 style="text-align: center">Items</h4>
                            <table class="table">
                                <tbody>
                                    {{#each}}
                                    <tr class="table-striped">
                                        <td style="text-align: left">{{id}}</td>
                                        <td>{{width}} x {{height}}</td>
                                        <td>{{style}}</td>
                                        <td><button {{action 'load' width}}>Load</button></td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
                <div class="col-md-9">

                    <div id="canvas_div">
                        <div id="itemLocation">
                            {{testWidth}}
                        </div>
                        <div id="canvas_container">
                            {{view "App.CanvasView"}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
</body>

那么，在View中我需要访问控制器的当前width属性，当用户点击Load按钮时？

我在这里创造了一个小提琴：http://jsfiddle.net/solex16/F9ZaX/1/

非常感谢任何帮助...

Answer 1

View具有一个控制器属性，您可以从视图中获取该属性。见Ember.View。

Answer 2

最后在视图中添加观察者非常简单：

widthChanged: function() {
    console.log('rerender');
    this.rerender();
}.observes('controller.testWidth'),

看到新的小提琴： http://jsfiddle.net/solex16/F9ZaX/5/

EmberJS - 如何操纵Canvas View

2 个答案: