用助手渲染Ember视图

时间:2014-10-22 20:50:25

标签: javascript ruby-on-rails model-view-controller ember.js jsfiddle

我已阅读ember guide以在我的Ember应用程序中实现相同目标,但我不能。

我正在尝试使用Controller配置我的视图,该控制器在两个值之间进行乘法

这里是代码:

App.TotalView = Ember.View.extend({
 attributeBindings: ['value', 'placeholder'],
 placeholder: null,
 value: '',
 total: (function() {
    return this.get('newThread.selectContentTariffa') * this.get('newThread.primary');
    }).property('newThread.selectContentTariffa', 'newThread.primary')
});

在视图中:

<td>{{view "total" valueBinding=newThread.value}}</td>

我无法在此视图中获得此乘法的结果,此代码是否正确?怎么了?

您可以在此处看到:http://emberjs.jsbin.com/qakado/edit

1 个答案:

答案 0 :(得分:1)

只关注您所面临的问题,而不是设计,并且基于您提供的代码,最后会有以下问题和相应的可能解决方案,

  1. newThread的来电,但未在任何地方定义 - 在控制器中创建newThread

  2. 视图助手使用total您可以创建模板并将其与App.TotalView关联,也可以使用视图助手的块形式 - 第一个示例使用模板,第二个使用块形式< / p>

  3. <强> JS

    App.ThreadsController=Ember.ArrayController.extend({
    
       selectContentTariffa: [
         {label: "180", value: "180"},
         {label: "200", value: "200"},
         {label: "300", value: "300"}
       ],
    
      newThread:{
        value:null,
        selectContentTariffa:null,
        primary:null
      }
    
    
    });
    
    
    App.TotalView = Ember.View.extend({
      templateName:"total",
     attributeBindings: ['value', 'placeholder'],
     placeholder: null,
     value: '',
     total: (function() {
        var res= parseInt(this.get('controller.newThread.selectContentTariffa')) * parseInt(this.get('controller.newThread.primary'));
       return isNaN(res)?"":res;
        }).property('controller.newThread.selectContentTariffa', 'controller.newThread.primary')
    });
    

    hbs - example1

    <script type="text/x-handlebars" data-template-name="threads">
        <table class="table table-bordered table-hover">
            <tr><th>Title 1</th><th>Title 2</th><th>Title 3</th></tr>
    
            <tr>
            <td>{{view Ember.Select prompt="Tariffa" valueBinding=newThread.selectContentTariffa content=selectContentTariffa optionValuePath="content.value" optionLabelPath="content.label"}}</td>
            <td>{{view Em.TextField type="number" valueBinding=newThread.primary class="form-control"}}</td>
            <td>{{view "total"}}</td>
            </tr>
        </table>
    
    </script>
      <script type="text/x-handlebars" data-template-name="total">
      this is total:{{view.total}}
      </script>
    

    <强> HBS-示例2

    <script type="text/x-handlebars" data-template-name="threads">
        <table class="table table-bordered table-hover">
            <tr><th>Title 1</th><th>Title 2</th><th>Title 3</th></tr>
    
            <tr>
            <td>{{view Ember.Select prompt="Tariffa" valueBinding=newThread.selectContentTariffa content=selectContentTariffa optionValuePath="content.value" optionLabelPath="content.label"}}</td>
            <td>{{view Em.TextField type="number" valueBinding=newThread.primary class="form-control"}}</td>
            <td>{{#view "App.TotalView"}}t:{{view.total}}{{/view}}</td>
            </tr>
        </table>
    </script>
    

    example1 - http://emberjs.jsbin.com/falafezijo/edit?html,js

    example2 - http://emberjs.jsbin.com/cuxafigiqe/1/edit?html,js