2017-08-24 166 views
1

試圖讓Aurelia撰寫ViewModel-less工作和有一些問題。Aurelia撰寫ViewModel-less

我在項目中遇到問題,所以爲了測試我克隆了skeleton-typescript項目。 我在src目錄中創建了一個test.html頁面,其內容爲<template><div>Hi I'm a test message</div></template>。 然後,在welcome.html頁面中,我在提交按鈕 <template><compose view="./test.html"></compose></template>之前添加了以下內容。

它不顯示這麼想知道我是否做錯了什麼(根據文檔,這是怎麼做的)或者是否有與aurelia的templating-resources問題?

我問Aurelia的Gitter頻道,但沒有得到答覆,我不想提出與模板資源的問題,以防萬一它是愚蠢的我這樣做,我想我會先問這裏。

回答

0

它看起來像你幾乎在那裏。只需調整一下,這應該起作用。是在奧裏利亞添加動態組成視圖所需的步驟如下:

創建動態視圖

創建HTML模板。在這種情況下,您需要創建test.html模板,如下面的代碼片段所示。

的test.html

<template> <div>Hi I'm a test message</div> </template>

撰寫視圖到您的父組件

你所創建的視圖後,您需要使用它撰寫成父組件<compose>由Aurelia框架提供的自定義元素。在你的情況,你需要做下面的改動你的<welcome>視圖模板:

<template> 
 
    <section class="au-animate"> 
 
    <h2>${heading}</h2> 
 
    <form role="form" submit.delegate="submit()"> 
 
     <div class="form-group"> 
 
     <label for="fn">First Name</label> 
 
     <input type="text" value.bind="firstName" class="form-control" 
 
      id="fn" placeholder="first name"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="ln">Last Name</label> 
 
     <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label>Full Name</label> 
 
     <p class="help-block">${fullName | upper}</p> 
 
     </div> 
 
     <compose view="./test.html"></compose> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
    </section> 
 
</template>

這樣做了以後,你的觀點應該包括在HTML只自定義元素的新的組成如圖所示在這個screengrab。

enter image description here

+0

肖恩,你是一個明星伴侶。我知道我在做一些愚蠢的事情,但看不到它!謝謝你的幫助。 –

+0

沒問題,'compose'在我第一次使用它的時候抓住了我:D –