原生脚本搜索栏上没有隐藏的操作栏

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

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

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

例如

var myViewModel = new Observable(); 

exports.loaded = function(args) { 
    myViewModel.set("myShowSearchBar", false); 
    page.bindingContext = myViewModel; 
} 

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

更妙的是，如果关注点分离使用，并提取在自己的文件全视图模型，然后将其导入。