0

削除ボタンを追加して機能させようとしています。問題を2つに分割しています。

私のxmlファイルには次のものがあります：

<Page loaded="onPageLoaded">
 <GridLayout rows="auto, *">
  <StackLayout orientation="horizontal" row="0">
   <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
     <Button cssClass="test" text="Add" tap="add"></Button>
     <Button cssClass="test" text="Refresh" tap="refresh"></Button>
  </StackLayout>
    <ListView items="{{ tasks }}" row="1">
     <ListView.itemTemplate>
       <Label text="{{ name }}" />
       <Button cssClass="test" text="X" tap="delbutton"></Button> 
   </ListView.itemTemplate>
  </ListView>
 </GridLayout>
</Page>

最初の問題は、削除ボタンである delbutton です。そのように追加すると、ビューが X の束に置き換えられます。理由が分からないようです。

私が問題を抱えている2番目の問題は、削除したいアイテムをループして削除するように機能させる方法です。私が現在行っているのは、次のようなjsonを使用してバックエンドサーバーからデータを取得することです

exports.onPageLoaded = function(args) {
    page = args.object;
    pageData.set("task", "");
    pageData.set("tasks", tasks);
    page.bindingContext = pageData;
    var result;
    http.request({
        url: "http://192.168.1.68:3000/posts.json",
        method: "GET",
        headers: { "Content-Type": "application/json" },
    }).then(function (response) {
        result = response.content.toJSON();
        for (var i in result) {
            tasks.push({ name: result[i].name });
        }
    }, function (e) {
        console.log("Error occurred " + e);
    });
};
exports.delbutton = function() {
    console.log("REM")
};

あなたの助けと時間をありがとう。

4

1 に答える 1

1

最初の問題 (X のみが表示されている) は、ListView アイテムがちょうど 1 つの子を必要とするという事実によるものです。2 つ (ラベルとボタン) があります。幸いなことに、1 つの項目が である可能性があるため、次のように 2 つの要素を StackLayout で囲む必要があります。

<Page loaded="onPageLoaded">
<GridLayout rows="auto, *">
    <StackLayout orientation="horizontal" row="0">
        <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
        <Button cssClass="test" text="Add" tap="add"></Button>
        <Button cssClass="test" text="Refresh" tap="refresh"></Button>
    </StackLayout>
    <ListView items="{{ tasks }}" row="1">
        <ListView.itemTemplate>
            <StackLayout orientation="horizontal">
                <Label text="{{ name }}" />
                <Label text="{{ hello }}" />
                <Button cssClass="test" text="X" tap="delbutton"></Button>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>
</Page>

ListView から項目を削除する 2 番目の部分について。宣言が貼り付けられたコードの一部ではないため、あなたpageDataが観察可能なオブジェクトであるかどうかはわかりませんが、そうであると推測しています。とにかく、observable を使用してデータを入力する方法 (NativeScript の ui:s を構築する方法、前のリンクを参照) と、ListView からアイテムを削除する方法の例を作成しました。

私がやっていることを説明するために、コードにコメントを追加しました。

var Observable = require('data/observable');
var ObservableArray = require('data/observable-array');

/**
 * Creating an observable object,
 * see documentation: https://docs.nativescript.org/bindings.html
 * 
 * Populate that observable object with an (empty) observable array.
 * This way we can modify the array (e.g. remove an item) and 
 * the UI will reflect those changes (and remove if from the ui
 * as well).
 * 
 * Observable objects are one of NativeScripts most fundamental parts
 * for building user interfaces as they will allow us to
 * change an object and that change gets propagated to the ui
 * without us doing anything.
 *
 */

var contextArr = new ObservableArray.ObservableArray();
var contextObj = new Observable.Observable({
    tasks: contextArr
});


exports.onPageLoaded = function(args) {
    var page = args.object;
    page.bindingContext = contextObj;
    /**
     * Simulating adding data to array after http request has returned json.
     * Also adding an ID to each item so that we can refer to that when we're
     * removing it.
     */
    contextArr.push({name: 'First Item', id: contextArr.length});
    contextArr.push({name: 'Second Item', id: contextArr.length});
    contextArr.push({name: 'Third Item', id: contextArr.length});
};

exports.delbutton = function(args) {
    /**
     * Getting the "bindingContext" of the tapped item.
     * The bindingContext will contain e.g: {name: 'First Item', id: 0}
     */
    var btn = args.object;
    var tappedItemData = btn.bindingContext;

    /**
     * Iterate through our array and if the tapped item id
     * is the same as the id of the id of the current iteration
     * then remove it.
     */
    contextArr.some(function (item, index) {
        if(item.id === tappedItemData.id) {
            contextArr.splice(index, 1);
            return false;
        }
    });

};
于 2015-06-22T20:39:54.193 に答える