带骨干的铆钉:在href / onclick属性上调用方法(函数)

时间:2017-09-27 15:20:09

标签: javascript function backbone.js href rivets.js

我正在尝试做的是调用下面的函数,进一步我想传递当前元素(item)作为参数。

<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

1 个答案:

答案 0 :(得分:2)

在解决问题的过程中,我找到了可以提供帮助的不同方法,如果有人可以得到帮助或者有任何需要改进的话,可以在这里发帖。

选项1

if (LI[Constants.FieldName_ReqLst_DueDate] != null)
{
  // create a time zone object hard coding to local time zone
  var timeInfo = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");
  var tempDate = (DateTime)LI[Constants.FieldName_ReqLst_DueDate];
  req.DueDate = TimeZoneInfo.ConvertTimeFromUtc(tempDate, timeInfo);
}

选项2 创建自定义活页夹

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

选项3 当我使用带有主干的rivetsjs时,我也可以利用骨干视图上的事件

<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>
相关问题