Question

我正在尝试在其中实现一个带有搜索栏的操作栏以及一个显示/隐藏搜索栏的按钮。在开始时，必须隐藏搜索栏。只有必须显示动作栏的标题和显示搜索栏的动作项。在视图中按预期工作，但是当我转到另一个视图然后返回到此视图时出现问题。搜索栏未隐藏，但按钮也不隐藏。我正在使用带有布尔值的observable来控制项目。当点击搜索搜索栏时显示，当我捕捉到清除事件时，我将搜索栏设置为隐藏。

最后，我还面临着当我回到这个视图时，clearEvent事件被调用两到三次。我不明白为什么会这样做。到目前为止，我在Android上尝试过。

当我启动应用程序时，操作栏看起来像第一张图片。如果我点击搜索图标，操作栏就像第二个一样当我走向不同的观点然后回去就像第三个：

编辑，我更改了所需的代码，但它还无法使用。这是一个完整的视图和js文件来重现问题：

的xml：

<dpg:DrawerPage navigatedTo="onNavigatedTo"  navigatingTo="navigatingTo"
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:component="customcomponents/menu"
  xmlns:lv="nativescript-telerik-ui/listview"
 loaded="loaded"
>


    <ActionBar class="actionB" title="stores" >
        <android>
            <NavigationButton icon="res://ic_menu_black_24dp" tap="showSlideout" />
        </android>
        <ios>
            <ActionItem icon="res://ic_menu" ios.position="left" tap="showSlideout" />
        </ios>

        <ActionItem>
            <ActionItem.actionView>
                     <SearchBar id="search" class="blank" backgroundColor="#3C5AFD" hint="Search..." visibility="{{ myShowSearchBar ? 'visible' : 'collapsed' }}" />
            </ActionItem.actionView>
        </ActionItem>

        <ActionItem tap="onSearch"
            ios.systemIcon="12" ios.position="right"
            android.systemIcon="ic_menu_search" android.position="actionBar" visibility="{{ myShowSearchBar ? 'collapsed' : 'visible' }}"/>

    </ActionBar>

    <dpg:DrawerPage.sideDrawer>
    <drawer:RadSideDrawer id="drawer" drawerSize="270">
            <drawer:RadSideDrawer.drawerContent>
                <component:menu />
            </drawer:RadSideDrawer.drawerContent>
        </drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

</dpg:DrawerPage>

js文件：

var frameModule = require("ui/frame");
var observable = require("data/observable");
var searchBarModule = require("ui/search-bar");
var topmost; 
var drawer;
var page;
var observableView = new observable.Observable({myShowSearchBar: false});



exports.loaded = function(args) {

  page = args.object;
  topmost = frameModule.topmost();

  observableView.set("myShowSearchBar", false);
  page.bindingContext = observableView;


  drawer = page.getViewById("drawer");
  var searchBarView = page.getViewById('search');


  if (searchBarView.android) {
     searchBarView.android.clearFocus();
  }


  searchBarView.on(searchBarModule.SearchBar.submitEvent, function (args) { 
      console.log("Search for " + (args.object).text);
      observableView.set("myShowSearchBar", false);
   });

   searchBarView.on(searchBarModule.SearchBar.clearEvent, function (args) {
       observableView.set("myShowSearchBar", false);
   });
 };


exports.showSlideout = function(){
  drawer.toggleDrawerState();
}


exports.onSearch = function(args){
  console.log("onSearch");
  observableView.set("myShowSearchBar", true);
}

Answer 1

在clearEvent或onSearch方法中访问 args.object 不是页面。在此之前，您正在为page.bindingContext创建可观察属性 myShowSearchBar 。所以基本上，你正在处理不同的绑定上下文。

更好（为了可读性和重用性）创建分离的视图模型并通过已知变量访问它。

e.g。

var myViewModel = new Observable(); exports.loaded = function(args) { myViewModel.set("myShowSearchBar", false); page.bindingContext = myViewModel; } exports.onSearch = function(args){ myViewModel.set("myShowSearchBar", true); }

如果使用关注点分离并在自己的文件中提取整个视图模型然后导入它，那就更好了。

动作栏上的nativescript搜索栏没有隐藏

1 个答案: