Question

我是EmberJS的初学者，我想从一个简单的例子开始。但这对我来说似乎并不容易。我尝试调整入门工具包的代码，并将其与EmberJS主页上的代码混合，但对我来说根本没有意义。

这是我的app.js

App = Ember.Application.create();
var c = 100;
var f = c * 9 / 5 + 32;
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return f;
  }
});

这是我糟糕的index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ember Starter Kit</title>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    <div>
      <label>Celsius:</label>
      {{input type="text" value=c placeholder="Convert Celsius to Fahrenheit"}}
    </div>
    <hr />
    <div class="text"><span class="celsius">{{ c }}</span> Celsius = <span class="fahrenheit"></span> Fahrenheit!</div>
    </div>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="index">
      <div>{{model}}</div>
  </script>

</body>
</html>

我已经尝试{{c * 9/5 + 32}}但这不起作用（与AngularJS相反）。所以，我的第一种方法肯定是错的。如何让我的应用程序运行？

Answer 1

Computed Properties

将您的Model定义为Ember对象，或DS.Model并使用派生属性。

App.Temperature = Em.Object.extend({
  celsius: null,

  faren: function() {
    return this.get('celsius')?this.get('celsius') * 9 / 5 + 32: 0;
  }.property('celsius')
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Temperature.create({celsius: 50});
  }
});

现在，hadlebars模板将此温度对象作为模型，您可以在模板中使用{{faren}}，并且只要摄氏变化，其值就会更新。您可以从输入字段绑定到它。

Handlebars helpers

Ember.Handlebars.helper('fh', function(value, options) {
  return (parseInt(value, 10) * 9 / 5 + 32);
});

并在模板中使用

{{fh c}} deg F

我已经尝试{{c * 9/5 + 32}}但这不起作用

我们的想法是尽可能地保留模板中的逻辑和算法。

在EmberJS中将Celsius转换为Fahrenheit

1 个答案: