0

kendo.data.DataSource に新しいデータをロードするときにリスト ビュー ページを更新するにはどうすればよいですか?

Telerik AppBuilder を使用してハイブリッド モバイル アプリに取り組んでいます。データ ソースにバインドされた単純なリストビューがあります。ajax POST リクエストを使用して JSON を読み込み、それをデータソースに配置します。ホームとリスト ビューの 2 つのページがあります。ホームには、単一のリスト ビュー ページにつながるいくつかのアンカーがありますが、データ ID 値が異なるため、異なるリストが生成されます。

初めてリスト ビュー ページを表示すると、正しく読み込まれます。その後、データソースをリロードしてもリスト ビューが更新されません。最初のリストの内容は、送信したデータ ID の値に関係なく常に表示されます。

ソースは次のとおりです。

JavaScript

window.APP =
{
    blamListSource: null,

    home:
    {
      fetchBlam: function(event)
      {
        var argumentData = event.button.data();
        var requestBody =
        {
          "requestVersionId": "1",
          "blamId": argumentData.id.toString()
        };

        $.ajax(
          {
            url: getBlamURI,
            type: "POST",
            data: JSON.stringify(requestBody),
            dataType: "json",
            contentType: 'application/json',

            success: function(requestData, textStatus, jqxhr)
            {
              APP.blamListSource = new kendo.data.DataSource(
                {
                  data: requestData.userList,
                });

              APP.blamListSource.read();

              app.navigate("views/blamlist.html");
            },

            error: function(jqxhr, textStatus, error)
            {
              alert("Error");
            },
          });
      }
    }
};

home.html

<div data-role="view" data-title="Home" data-layout="main"
     data-model="APP.models.home" data-zoom="true">
  <div id="form-blam" data-role="content">
    <a id="commercial" data-role="button"
       data-bind="click: fetchBlam" data-id="27">Something</a>
    <a id="personal" data-role="button"
       data-bind="click: fetchBlam" data-id="39">Something Else</a>
  </div>
</div>

ビュー/blamlist.html

<div data-role="view" data-title="Blam List" data-layout="main"
     data-model="APP" data-zoom="true">
  <div data-role="navbar">
    <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
  </div>
  <ul id="blam-listview" data-style="inset" data-role="listview"
      data-template="blamListTemplate" data-bind="source: blamListSource">
  </ul>
  <p id="no-contactlist-span" hidden="hidden" class="no-items-msg">
    <b>No blam.</b>
  </p>
</div>

<!-- Blam ListView Template -->
<script type="text/x-kendo-template" id="blamListTemplate">
  <div>
    <div>
      <img id="blamPhoto" src="#: data.photoUri #"/>
    </div>
    <div>
      <div id="name">#: data.name #</div>
      <div>#: data.title #</div>
      <div>
        <div>
          <a data-role="button" class="callimg"
             data-phone="#: data.phone #" href="tel:#: data.phone #"
             data-rel="external"></a>
        </div>
        <div>
          <a data-role="button" class="emailimg"
             href="mailto:#: data.email #"
             data-rel="external"></a>
        </div>
      </div>
    </div>
  </div>
</script>
4

1 に答える 1

0

かなり簡単なようです。

ビューに data-reload="true" を追加します。

古い - 更新しない

<div data-role="view" data-title="Blam List" data-layout="main"
 data-model="APP" data-zoom="true">

新規 - リフレッシュ

<div data-role="view" data-title="Blam List" data-layout="main"
 data-model="APP" data-zoom="true" data-reload="true">

編集誤って「data-refresh」を入れましたが、これは間違っています。正しい値 (正しくなるように編集) は「data-reload」です。

于 2015-12-06T14:35:57.823 に答える