0

埋め込みコールバックから特定の変数を取り出そうとしています。現在、フォームが機能し、プレビューが生成されています。ただし、個々の変数を呼び出すことはできません。

これは私の見解での私のオリジナルの埋め込みコードです:

<div class="container">
   <div class="row">
      <div class="span10 columns offset3">
          <h3>Share a link</h3>
          <form id="preview_form" class="form-vertical" method="post" action=".">
            <fieldset>
            <div class="clearfix">
                <label for="url">URL</label>
                <input type="text" class="input-xxlarge" name="url" id="id_url" />
                <span class="help-block">Enter a url.</span>
            </div>
            </fieldset>
            <!-- Placeholder that tells Preview where to put the loading icon-->
            <div class="loading">
              <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'>
            </div>
            <!-- Placeholder that tells Preview where to put the selector-->
            <div class="selector"></div>

            <div class="actions">
              <input id="id_submit" type="submit" class="btn btn-primary" value="Post"/>
            </div>

          </form>
        </div>
      </div>
      <div class="row">
        <div id="feed" class="span10 columns offset3">

        </div>
      </div>
      <div class="clear"></div>
</div>
<script>
      var preview = {
        submit : function(e, data){
          e.preventDefault();
          this.display.create(data);
        }
      }
      $('#id_url').preview({key:'my_key',
                            preview:preview,
                            selector : {type:'rich'},
                            maxwidth : 500,
                            display : {display : 'rich'}});
</script>

それはうまくいきます。ただし、個々の変数をテンプレートに入れたいです（以下はテンプレートです）。これを行う方法、またはビューにプルする方法に関する提案はありますか? 現在、{{title}} は、他のすべての変数とともに、実際のタイトルではなく {{title}} として表示されます。

<div id="selector" class="small">
   <div class="thumbnail">
      <div class="controls">
          <a class="left" href="#">&#9664;</a>
          <a class="right" href="#">&#9654;</a>
          <a class="nothumb" href="#">&#10005;</a>
      </div>
      <div class="items">
          <ul class="images">
            {{#images}}
            <li><img src="{{url}}"/></li>
            {{/images}}
          </ul>
      </div>
    </div>
      <div class="attributes">
        <a class="title" href="#">{{title}}</a>
        <p><a class="description" href="#">{{description}}</a></p>
        <span class="meta">
          <img class="favicon" src="{{favicon_url}}">
          <a class="provider" href="{{provider_url}}">{{provider_display}}</a>
        </span>
      </div>
      <div class="action"><a href="#" class="close">&#10005;</a></div>
 </div>
4

1 に答える 1

0 
  $('#id_url').preview({key:'my_key',
                        preview:preview,
                        selector : {type:'rich'},
                        maxwidth : 500,
                        display : {display : 'rich'}}
                        success : function(oembed){
                                  oembed.title // gives you title
                                  oembed.description // gives you description 
                                  });

それらを使用して、必要に応じてスタイルを設定できます。ただし、これはデフォルトの埋め込みスタイルをオーバーライドします。

于 2012-10-15T10:36:49.807 に答える