基於URL的聚合物顯示內容

我正在嘗試創建一個自定義元素以供重用。我擁有的是由三個屬性組成的數據，這些屬性將顯示在各自的頁面上，具體取決於您點擊的鏈接。我正在使用Polymer Starter Kit。基本上，我想有一個信息頁面，根據URL的內容而改變。我有一個頁面上的程序列表，其中包含各自頁面的鏈接。到目前爲止，我有這樣的：基於URL的聚合物顯示內容

在我的index.html，我有一個部分，看起來像這樣：

<section data-route="programs"> 
<paper-material elevation="1"> 
<h1>Programs</h1> 
<a href$="{{baseUrl}}programs/firstprogram">Program 1</a></br> 
<a href$="{{baseUrl}}programs/secondprogram">Program 2</a></br> 
<a href$="{{baseUrl}}programs/thirdprogram">Program 3</a></br> 
</paper-material> 
</section>

然後，我有一個自定義元素，節目信息，看起來像這樣

<dom-module id="program-info"> 
    <template> 
    <h2 class="page-title">{{program.name}}</h2> 
    <p>{{program.price}}</p> 
    <p>{{program.description}}</p> 
    </template> 
    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'program-info' 
     }); 
    })(); 
    </script> 
</dom-module>

基於被點擊的程序，我想抓取數據並在我的自定義元素（名稱，價格，描述）中使用它。我想過把它放在一個數組中，因爲只有7個程序，但我不知道如何根據URL獲取數組中的正確項目。

有什麼想法？

來源

2016-04-02 user1795832

也許https://elements.polymer-project.org/elements/carbon-route做你想要的 –

我已經看過它，它似乎並沒有。 – user1795832

如果您的確在使用PSK，請參閱app/index.html中的章節/頁面user-info。它根據從URL抓取的名稱顯示關於用戶的信息。

當然，您還應該看看app/elements/routing.html中的路由配置，以瞭解如何從URL中獲取名稱並將其設置爲params變量。

然後您應該添加/修改您的programs路線以滿足您的需求。

編輯：

你可以看到在這個示例應用程序了類似的方法：將data is fetch當route changes，並隨後在blog-app element範圍set to an article property。在此元素中，article屬性本身綁定到負責顯示先前通過網絡獲取的文章內容的similarly named property of the "page element" article-detail。

來源

2016-04-03 09:27:19

正確，這很容易，但不完全是我要找的。用戶信息頁面僅顯示基於URL的用戶名稱。我需要超越這一點，並根據URL顯示其他數據。以用戶信息爲例，假設我想顯示用戶的年齡和職業。我會將這些信息存儲在json文件或數組中，但最終需要根據用戶提取這些信息。所有PSK所使用的都是使用URL中的名稱，沒有別的。 – user1795832

您是否將每個頁面提取到一個元素？如果是這樣，你可以簡單地觀察對這個'params'屬性的更改，測試你的頁面是否真的是選定的，並從你的數組中獲取你需要的數據，或者使用'iron-ajax'獲取JSON。 –

我剛剛發現這個，這是你在說什麼@vincent guillou？ http://polymerlabs.github.io/app-layout/templates/publishing/#/art/list – user1795832

基於URL的聚合物顯示內容

回答

相關問題