1

nativescript helloworld appの読み取りとテストを終えたところですが、アイテムをクリックして削除する方法がわかりません。クリックして.spliceを作成した後に配列インデックスを取得する必要があることは理解していますが、引数にはそのようなデータがありますか?? これを行う方法を教えてください。ありがとうございました！

タスク.js

var observableModule = require("data/observable");
var observableArray = require("data/observable-array");
var viewModule = require("ui/core/view");

var tasks = new observableArray.ObservableArray([]);
var pageData = new observableModule.Observable();
var page;

exports.onPageLoaded = function(args) {
    page = args.object;
    pageData.set("task", "");
    pageData.set("tasks", tasks);
    page.bindingContext = pageData;
};

exports.add = function() {
    tasks.push({ name: pageData.get("task") });
    pageData.set("task", "");
    viewModule.getViewById( page, "task" ).dismissSoftInput();
};

exports.del_first = function() {
    tasks.splice(0,1);
    viewModule.getViewById( page, "task" ).dismissSoftInput();
    console.log('DEL');
};

exports.remove = function(args) {
    console.log('REM');
};

タスク.xml

<Page loaded="onPageLoaded">
    <GridLayout rows="auto, *">
        <StackLayout orientation="horizontal" row="0">
            <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
            <Button text="Add" tap="add"></Button>          
            <Button text="Delete 1st" tap="del_first"></Button>
        </StackLayout>

        <ListView items="{{ tasks }}" row="1">
            <ListView.itemTemplate>
                <StackLayout orientation="horizontal" row="0">
                    <Label text="{{ name }}" />
                    <Button text="x" tap="remove"></Button> 
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>
    </GridLayout>
</Page>
4

1 に答える 1

3

問題は、ボタンが削除するタスクを認識していないことです。text="x" と tap="remove" である、渡したもの以外の値は渡されません。

したがって、トリックは、タスクの id/index を含むボタンに独自の追加値を割り当てて、それをタスクに戻すことができるようにすることです。ボタンのプロパティ値とオブジェクト キーには、割り当てられていない任意の名前を使用できます (私はindex ="{{ index }}" を使用することにしました。したがって、deleteId ="{{ id }}" も同様に有効です。

したがって、現時点でこれを行う最善の方法は、コードにいくつかの小さな変更を加えることです。

タスク.js

var observableModule = require("data/observable");
var observableArray = require("data/observable-array");
var viewModule = require("ui/core/view");

// Pretend we loaded some records, notice the new "index" field?
//  This is what name we use in the xml, so it is: "{{ index }}"
//  Again this name can be anything you want; id, index, guid, uuid, etc...
var _tasks = [{name: 'aaa', index: 0}, {name: 'bbb', index: 1}, 
    {name: 'ccc', index: 2},{name: 'ddd', index: 3},{name: 'eee', index: 4}];

// Simple _index count since I cheated and created a fixed array; 
// the better way would be to enumerate the array 
// and set _index to the highest index found in the array.
var _index = _tasks.length;;

var tasks = new observableArray.ObservableArray(_tasks);
var pageData = new observableModule.Observable();
var page;

exports.onPageLoaded = function(args) {
  page = args.object;
  pageData.set("task", "");
  pageData.set("tasks", tasks);
  page.bindingContext = pageData;
};

exports.add = function() {
  // Note we are creating a new index, always incrementing so that the
  // _index will always be unique.   UUID's would also work.
  var newIndex = ++_index;

  // Push the name and new created index again using the same "index" field
  tasks.push({ name: pageData.get("task"), index: newIndex });
  pageData.set("task", "");
  viewModule.getViewById( page, "task" ).dismissSoftInput();
};

exports.del_first = function() {
  tasks.splice(0,1);
  viewModule.getViewById( page, "task" ).dismissSoftInput();
  console.log('DEL');
};

exports.remove = function(args) {
  // The args is a event packet, with 
  //    eventName = what event occurred 
  //    object = the object this event occurred against
  // So we need to use the target object, 
  //   then we are getting the "index" PROPERTY we assigned on it in the xml
  var target = args.object;
  var index = target.index;

  // Now we search all the tasks, to find the index that matches our
  // index that the button was pressed on.   Then we delete it and break out of the loop.
  for (var i=0;i<tasks.length;i++) {
    if (tasks.getItem(i).index === index) {
        tasks.splice(i,1);
        break;
    }
  }

  console.log('REM');
};

タスク.xml

<Page loaded="onPageLoaded">
  <GridLayout rows="auto, *">
    <StackLayout orientation="horizontal" row="0">
        <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
        <Button text="Add" tap="add"></Button>
        <Button text="Delete 1st" tap="del_first"></Button>
    </StackLayout>

    <ListView items="{{ tasks }}" row="1">
        <ListView.itemTemplate>
            <StackLayout orientation="horizontal" row="0">
                <Label text="{{ name }}" />
     <!------------ Notice the new "index" property ----------->
                <Button text="x" index="{{ index }}" tap="remove"/>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
  </GridLayout>
</Page>
于 2015-05-22T05:48:51.067 に答える