乘以2輸入值並使用流星模板幫手在輸入文本框中顯示

我正在使用MeteorJS開發餐廳管理系統。我在這裏嘗試完成的是當我在「數量」列中鍵入某個數字時，它將自己與「價格」列中的價格相乘，然後在「總計」列中顯示文本框內的總銷售額。我知道有幾種解決方案，但我不知道這是否可以使用流星模板助手完成。乘以2輸入值並使用流星模板幫手在輸入文本框中顯示

Screenshot

來源

2015-09-04 neng

關閉太板：有太多可能的答案，或者對於這種格式太好的答案太長。請添加詳細信息以縮小答案集或隔離幾個段落中可以回答的問題。 –

是的，可以，流星模板反應，所以你只需要簡單地做一些事情，如：

<template name="costCalcualtor"> 
    <input id="quantity"> 
    <p id="price">$10</p> 
    <p>It'd be ${{totalCost}}.</p> 
</template>

在你的HTML，並在你的JS，只是使一個Template.costCalcualtor事件觸發間隔實時用戶輸入「數量」id的input，將innerHTML解析爲整數，將其乘以價格（通過解析innerHTML中的「價格」id的p獲得的另一個整數），Session.set('price',finalValue），然後將totalCost作爲Template.costCalcualtor HEL每個函數返回基於Session.get("price")的新值。

更新：

不會僅僅返回一個變量在keyup事件，你到底應該使用Session.set("total", price*quantity);，和線var total = parseInt($('total').val(price * quantity));並沒有真正做任何事情。
那麼您需要在模板中使用{{totalCost}}。並定義一個幫助器來檢索會話變量「total」的值：Session.get("total")。

這裏是步行通過展示我的意思：

在.js fileh：

if (Meteor.isClient) { 
    // counter starts at 0 
    Session.setDefault('counter', 0); 
    Template.salesAdd.helpers({ 
    total: function(){ 
     return Session.get("total") 
    } 
    }); 
    Template.salesAdd.events({ 'keyup #meow': function() { 
    var quantity = parseInt($('#meow').val()); 
    console.log(quantity); 
    Session.set("total", quantity); } }) 
}

在.html文件：

<head> 
    <title>meow</title> 
</head> 

<body> 
    <h1>Welcome to Meteor!</h1> 
    {{> salesAdd}} 
</body> 

<template name="salesAdd"> 
    <input id="meow"> 
    <p> What you've typed: {{total}}</p> 
</template>

來看，它&當您輸入時，請查看號碼更改10。

流星是一個非常強大的工具，由偉大的人開發的工具，它的好處是它易於學習，它有很好的文檔，所以我建議你go through the basic docs，如果可能，the full api。

來源

2015-09-04 04:02:06

非常感謝。這是我的代碼 '' 'Template.salesAdd.events（{ 'KEYUP #quantity' ：function（）{ var quantity = parseInt（$（'quantity'）。VAL（））; var price = parseInt（$（'price'）。val（））; var total = parseInt（$（'total'）.val（price * quantity））; return total; } }）;' – neng

so sorry我不知道如何編輯代碼格式。當用戶輸入「數量」字段時，我嘗試從輸入表單中獲取輸入數據。它似乎沒有工作。我在這裏錯過了什麼？再次感謝您的耐心。我快到那裏了。 – neng

沒關係。我知道了。忘記＃。非常感謝你的支持 – neng

乘以2輸入值並使用流星模板幫手在輸入文本框中顯示

回答

相關問題