0

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

<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 价值的指导。

4

2 回答 2

2

计算属性被称为属性，而不是函数。而且，更重要的是，它们是“绝对”键路径，因此它们不会对集合起作用。要使其正常工作，您有两种选择：

使用数据函数

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

<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>

您可能会发现将辅助函数“全局”放置更方便：

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>
于 2014-08-30T15:03:30.603 回答
1

计算属性适用于整个模板 - 换句话说，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/

于 2014-08-30T14:57:46.133 回答