我已经阅读了ember指南,以便在我的ember应用程序中实现同样的目的,但我做不到。
我正试图用一个控制器来配置我的视图,该控制器在两个值之间进行乘法运算
这里的代码:
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
通过只关注您面临的问题,而不是设计,并基于您提供的代码,有以下问题和相应的可能解决方案应用于最后的示例,
-
有对
newThread
的调用,但在任何地方都没有定义-在控制器中创建一个newThread
-
视图辅助对象使用
total
您可以创建一个模板并将其与App.TotalView
关联,也可以使用视图辅助对象的块形式-第一个示例使用模板,第二个示例使用块形式
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-示例1
<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-example2
<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>
示例1-http://emberjs.jsbin.com/falafezijo/edit?html,js
示例2-http://emberjs.jsbin.com/cuxafigiqe/1/edit?html,js