2017-09-27 11 views
-2

私がしようとしているのは、以下のようなfuncationを呼び出すことです。さらに、現在の要素(item)をパラメータとして機能させたい。バックボーンを使ったリベット:href/onclick属性の呼び出しメソッド(関数)

<tr rv-each-item="items:models"> 
    <td><a href="javascript:selectedItem(item);">{ item:Name }</a></td> 
</tr> 

var selectedItem = function (item) 
{ 
    console.log(item); 
} 

周りの検索中に、私は議論の役に立つの下に見つかりましたが、周りの作業中、それはバックボーン

https://github.com/mikeric/rivets/issues/554

Rivets.js: When button is clicked, call a function with an argument from a data binding

+0

あなたが共有した質問への回答を書きました。そして私は過去にバックボーンを持つリベットを使用しました。バックボーンで動作しない理由を示す[mcve]を共有してください。あなたはおそらく何か間違っているでしょう。 –

答えて

0

を実装していないとして、私の問題を解決することができませんでした私は、そのことができます異なるアプローチを見つけました誰かが助けを求めたり、改善が必要な場合は、ここに投稿してください。

オプション1

<body> 
    <div rv-each-book="model.books"> 
     <button rv-on-click="model.selectedBook | args book"> 
      Read the book {book} 
     </button> 
    </div> 
</body> 

<script type="text/javascript"> 
    rivets.formatters["args"] = function (fn) { 
     var args = Array.prototype.slice.call(arguments, 1); 
     return function() { 
      return fn.apply(null, args); 

     }; 
    }; 

    rvBinder = rivets.bind(document.body, { 
     model: { 
      selectedBook: function (book) { 
       alert("Selected book is " + book); 
      }, 
      books: ["Asp.Net", "Javascript"] 
     } 
    }); 
</script> 

オプション2 カスタムバインダを作成します

<body> 
    <div rv-each-book="books"> 
     <a rv-cust-href="book"> 
      Read the book {book} 
     </a> 
    </div> 
</body> 

<script type="text/javascript"> 

    rivets.binders['cust-href'] = function (el, value) { 
     //el.href = '/Books/Find/' + value; 
     //OR 
     el.onclick = function() { alert(value);}; 
    } 

    rvBinder = rivets.bind(document.body, { 
      books: ["Asp.Net", "Javascript"] 
    }); 
</script> 

オプション3 私は骨格とrivetsjsを使用していたとして、私はまたの利点を得ることができますバックボーンビューのイベント

// backbone view 
events: { 
    'click #linkid': 'linkclicked' 
}, 
linkclicked: function (e){ 
    console.log(this.model.get("Name")); 
}, 

<td><a id="linkid" href="#">{ item:Name }</a></td> 
関連する問題