EmberJS - 如何操作畫布視圖

我工作的灰燼App和需要幫助加載帆布項目EmberJS - 如何操作畫布視圖

我可以從內部灰燼畫一個簡單的矩形，並已成功加載了一些，我想訪問使夾具數據我的矩形可以使用它的屬性

這裏是我的灰燼代碼：

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>

因此，在視圖中，我需要訪問控制器的當前寬度屬性，當用戶點擊Load按鈕時？

我已經在這裏創造一個小提琴：http://jsfiddle.net/solex16/F9ZaX/1/

任何幫助深表感謝......

來源

2014-01-27 solex16

一種觀點控制器屬性，您可以從視圖中弄個。見Ember.View。

來源

2014-01-27 13:20:19 Zaki

OK THX @Zaki已幫助，但寬度屬性不更新當用戶點擊加載按鈕..我是否需要重新渲染視圖內的動作？..這裏是新的小提琴：http://jsfiddle.net/F9ZaX/2/ – solex16

對不起，最新的小提琴在這裏：http：// jsfiddle.net/solex16/F9ZaX/4/ – solex16

確定到底很簡單觀察者添加到視圖：

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

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

來源

2014-01-29 14:19:57 solex16

EmberJS - 如何操作畫布視圖

回答

相關問題