Question

查看RivetsJS pull request 186可以看到您现在可以构建自定义标记（组件/可重用视图）。但我没有看到任何显示完整示例及其工作原理的文档。

我尝试了以下操作，但加载页面时没有任何反应。任何帮助表示赞赏

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello</title>
        <script type="text/javascript" src="rivets.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="cltemplate" id="auctionTemplate">
          <section id="auction">
            <h1>{auction.title}</h1>

            <aside rv-show='auction.remaining'>
              <h4>Hurry up!<h4>
              <p>This auction is ending in { auction.remaining }.</p>
            </aside>

            <button rv-on-click="controller.bid" rv-disabled="auction.disabled">Place a bid</button>
          </section>
        </script>
        <script type="text/javascript">
          rivets.components.auction = {
            attributes: [],
            build: function() {
              return $('#auctionTemplate').text();
            }
          }
          var auctionModel = {title: "Selling A House", remaining: 20, disabled: false};
          var controller = function(auction){
            this.auction = auction;
            this.bid = function() {
              console.log('you bid...');
              auction.remaining -= 10;
              console.log('only ' + auction.remaining + ' remaining' );
              if(auction.remaining - 10 < 0) {
                auction.disabled = true;
              }
            };
            return this;
          };
        </script>
      </head>
      <body>
        <rv-auction auction="auction" controller="controller"></rv-auction>
      </body>
    </html>

Answer 1

build中的rivets.components.auction方法应返回DOM元素，而不是字符串。

赞$('#auctionTemplate').get(0);

如何配置Rivetsjs组件

1 个答案: