Question

我想要一个简单的输入＆amp;通过函数运行它的值，并在同一模板中的另一个位置显示该函数的结果。我只是无法弄清楚我连接绑定的位置以显示函数的结果。我正在尝试对输入的值运行计算并将结果推送到{{suggestedGrams}}。我正在为此模板使用生成的视图。

这就是我所拥有的：

模板

<script type="text/x-handlebars" data-template-name="brew">
{{input type="text" id="start-brew" placeholder="Enter a number, e.g: 16" name=id value=submittedOunces action="startBrew"}}

<p>We recommend using {{suggestedGrams}} grams of coffee for {{ounces}} oz. in a {{id}}.</p>
</script>

控制器

App.BrewController = Ember.ObjectController.extend({
submittedOunces: "",
// updates the {{ounces}} binding with value typed in input
ounces: function() {
     if (this.submittedOunces.length < 1) {
        return "";
     } else {
        return this.get("submittedOunces");
     }
}.property("submittedOunces"),
    actions: {
        startBrew: function () {
           // other logic is here to show hidden div's
        }
    }
});

我想我错过了一些明显的东西，但我对Ember完全不熟悉所以很难找到合适的术语来找到我正在寻找的东西。任何帮助将不胜感激。

Answer 1

我通过添加另一个函数来解决这个问题，感谢@claptimes（请参阅对原始问题的评论）。我遇到麻烦的障碍是功能范围 - 我在一个函数中读取变量，出于某种原因我期望在另一个函数中可用。这是我的最终代码：

App.BrewController = Ember.ObjectController.extend({
    submittedOunces: "",
    ounces: function() {
         if (this.submittedOunces.length < 1) {
            return "";
         } else {
            return this.get("submittedOunces");
         }
    }.property("submittedOunces"),
    // This is where I was running into trouble.
    // I needed to declare the value again to gain access to it.
    grams: function() {
        var submittedOunces = this.get("submittedOunces");
        return submittedOunces * 2; // or whatever the function (in my case, a simple math formula) needs to be
    }.property("submittedOunces"),
    actions: {
        startBrew: function () {    
            $('.hide').fadeIn("fast");      
        }
    }
});

提交输入时运行功能

1 个答案: