Question

我使用firebase获得了一个简单的测试应用程序，其中包含以下模板和模型。我想访问计算新价格中的价格值，将其格式化为具有2位小数的货币。我无法弄清楚如何获得在输出中显示正常的.price值，但我尝试过的任何东西似乎都无法在计算中看到.price。对newprice的调用很好，因为我可以返回文本并在输出中看到它。它使用.price的原因是来自firebase的返回数据将每个品牌，型号，价格包装在一个唯一的自动生成的ID中，所以我看到一个顶级对象，每个条目id和数据作为对象与make，model，价钱。

<script id='template' type='text/ractive'>
{{#each listdata:i}}
    <p>{{ .make }} {{ .model }}{{.price}} ${{ newprice() }}!</p>
{{/each}}
</script>
<script>
    var ractive = new Ractive({
      // The `el` option can be a node, an ID, or a CSS selector.
      el: 'container',

      // We could pass in a string, but for the sake of convenience
      // we're passing the ID of the <script> tag above.
      template: '#template',
      computed: {
        newprice: function() {
          // CAN'T FIGURE OUT WHAT TO DO HERE TO SEE price
          return  ;
        }
      }
    });

</script>

需要一些指导如何到达.price值。

Answer 1

计算属性被引用为属性，而不是函数。并且，更重要的是，＆＃34;绝对＆＃34; keypaths所以他们不会对集合起作用。要实现这一点，您有两种选择：

使用数据功能

使用数据函数代替计算属性：

<script id='template' type='text/ractive'>
{{#each listdata:i}}
    <p>{{ .make }} {{ .model }}{{.price}} ${{ newprice(.price) }}!</p>
{{/each}}
</script>
<script>
    var ractive = new Ractive({
      el: 'container',
      template: '#template',
      data: {
        newprice: function(price) {
          return price + 1;
        },
        // other data
      }
    });

</script>

您可能会发现在全球范围内放置帮助功能更加方便＆＃34;：

Ractive.defaults.data.newprice = function(price){...}

如果您有现有/最喜欢的库，您也可以使用此技术并在模板中内联访问方法

<script src="path/to/accounting.js"></script>
Ractive.defaults.data.accounting = accounting

<p>{{ .make }} {{ .model }}{{.price}} ${{ accounting.formatMoney(.price) }}!</p>

使用计算属性，但在组件级别

使用组件渲染每个项目，然后计算属性将是每个项目：

<script id='template' type='text/ractive'>
{{#each listdata:i}}
    <line/>
{{/each}}
</script>

<script id='line' type='text/ractive'>
    <p>{{ make }} {{ model }}{{price}} ${{ newprice }}!</p>
</script>

<script>
    Ractive.components.line = Ractive.extend({
      template: '#line',
      computed : {
        newprice: function(){
           return this.get('price')
        }
      }
    })
    var ractive = new Ractive({
      el: 'container',
      template: '#template',
    });

</script>

Answer 2

计算属性适用于整个模板 - 换句话说，在上面的示例中没有listdata[0].newprice等等，只有一个newprice。

相反，您需要创建一个Ractive可以从模板内部访问的函数，并将旧价格传递给它：

<!-- language: lang-html -->

{{#each listdata:i}}
  <p>{{ .make }} {{ .model }}: {{.price}} -> ${{ newprice( .price ) }}!</p>
{{/each}}

<!-- language: lang-js -->

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    listdata: [
      { make: 'Toyota', model: 'Prius', price: 25000 },
      { make: 'Dodge', model: 'Challenger', price: 30000 },
      { make: 'Jeep', model: 'Grand Cherokee', price: 35000 },
      { make: 'Bugatti', model: 'Veyron', price: 2000000 }
    ],
    discount: 0.1,
    newprice: function ( oldprice ) {
      return oldprice * ( 1 - this.get( 'discount' ) );
    }
  }
});

这是一个JSFiddle来演示：http://jsfiddle.net/rich_harris/nsnhwobg/

Ractive计算属性

2 个答案:

使用数据功能

使用计算属性，但在组件级别